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内 容 提 要 
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“O’Reilly 凭借 一 系列 非凡 想法 (真希 望 当 初 我 也 想到 了 ) 建立 了 数 百 万 美元 的 业务 。” 
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“Tim 是 位 特 立 独行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 ， 并 且 切 实地 按照 
Yogi Berra 的 建议 去 做 了 :“ 如 果 你 在 路 上 过 到 岔路 口 ， 走 小 路 (岔路 ) ”回顾 过 去 ， 
Tim 似乎 每 一 次 都 选择 了 小 路 ,而且 有 几 次 都 是 一 闪 即 逝 的 机 会 ， 尽 管 大 路 也 不 错 。” 
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“本 书 全 面 介绍 了 ES6 新 特性 的 语法 和 语义 ， 有 助 于 你 大 幅度 提升 代码 的 表达 能 力 。 作 者 
把 这 些 特 性 融入 简单 易 懂 的 示例 中 ， 帮 你 快速 上 手 。” 
一 一 Kent C. Dodds ，PayPal 前 端 工程 师 ，TC39 成 员 




















“作者 对 重新 定义 现代 JavaScript 的 诸多 特性 进行 了 深入 彻底 又 贴 合 实际 的 解读 。” 
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Mathias Bynens，Google 前 端 工程 师 ，TC39 成 员 




















“真正 掌握 JavaScript 很 难 ，2015 版 规范 又 增加 了 很 多 新 特性 。 本 书 化 整 为 零 ， 分 别 介绍 了 
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Jordan Harband，Airbnb 软件 工程 师 ，TC39 成 员 
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“1995 年 ， 我 在 发 明 JavaScript 的 时 候 ， 并 没有 想到 它 日 后 能 成 为 互联 网 上 使 用 最 广 的 编程 
语言 。 本 书 与 我 循序 渐进 和 直观 明了 的 教学 理念 不 谋 而 合 。 建 议 你 好 好 读 一 读 ， 从 中 发 现 
对 自己 有 用 的 东西 ， 进 而 真正 拥抱 JavaScript， 最 终 致 力 于 为 所 有 人 开发 更 好 的 Web 应 用 。” 
Brendan Eich ，JavaScript 之 父 
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1995 年 ， 我 在 Netscape 发 明 JavaScript 的 时 候 ， 并 没有 想到 它 日 后 能 成 为 互联 网 上 使 用 最 
广 的 编程 语言 。 我 只 知道 自己 时 间 有 限 ， 要 尽快 写 出 一 个 “最 小 可 发 布 的 ”版 本 。 正 因为 
如 此 ， 我 将 它 写 得 尽量 可 扩展 ， 自 全 局 对 象 以 下 都 可 以 修改 ， 其 至 连 基础 级 的 元 对 象 协 议 
钧 子 (如 与 Java 方法 同名 的 tostring 和 value0f) 也 可 以 修改 。 




















抛 开 其 不 断 演进 和 越 来 越 流行 不 说 ，JavaScript 始终 受益 于 一 种 递 进 的 、 务 实 的 教学 方法 ， 
即 “ 要 事先 行 ”。 我 认为 这 与 匆忙 设计 和 故意 为 之 的 可 扩展 性 有 着 必然 的 联系 。 我 重度 使 
用 函数 和 对 象 这 两 个 核心 元 素 。 因 此 ， 程 序 员 可 以 将 它们 作为 通用 构造 ， 花 式 地 构建 各 
种 工具 ， 最 终 造 出 一 把 锋利 的 “瑞士 军刀 ”。 而 对 学 生来 说 ， 这 意味 着 他 们 必须 了 解 各 种 
工具 都 能 解决 哪些 任务 ， 以 及 如 何 恰如其分 地 运用 这 些 工具 。 

















我 感觉 Netscape 就 像 一 阵 旋风 ， 相 信 1995 年 的 那 批 同事 也 都 有 同感 。 那 一 年 ，Marc 
Andreessen 在 路 演 时 反复 强调 “Netscape+Java 会 灭 掉 Windows”， 借 与 微软 竞争 而 迅速 实 
现 了 IPO。Java 是 正统 编程 语言 、 老 大 哥 .“ 蝙 蝠 侠 ” ， 而 JavaScript 只 是 一 个 小 兄弟 、“ 助 
手 罗 宾 ”、 小 小 的 脚本 语言 。 




















但 在 编写 第 一 版 (代号 Mocha) 时 我 就 知道 ，JavaScript (而 不 是 Java) 会 与 Netscape 浏览 
器 以 及 我 同时 创造 的 文档 对 象 模型 深度 绑 定 。Netscape 与 Sun 或 者 浏览 器 与 JVM 的 界限 
是 无 法 跨越 的 ，Java 只 能 作为 插件 幅 入 。 


因此 我 当时 就 有 一 种 预感 ，JavaScript 要 么 会 随时 间 的 推移 慢 慢 走 向 成 功 ， 要 么 会 因为 某 
些 原因 迅速 消亡 。 记 得 我 的 好 友 兼 室友 Jeff Weinstein 问 我 后 20 年 干什么 时 ， 我 说 :“ 要 么 
开发 JavaScript， 要 么 完蛋 。” 那 时 ， 我 就 感觉 好 像 欠 了 JavaScript 用 户 一 屁股 债 。 这 种 感 
觉 源 于 我 在 极 短 时 间 和 管理 层 严令 “看 起 来 要 像 Java” 的 双重 限制 下 ， 选 择 了 “ 双 面 瑞士 
军刀 ”这 种 设计 。 
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“模块 化 JavaScript”(Modular JavaScript Series) 这 套 书 与 
念 不 谋 而 合 ， 先 从 浅显 易 懂 的 代码 示例 讲 起 ， 逐 步 扩展 到 


我 循序 渐进 和 直观 明了 的 教学 理 
设计 模式 ， 再 到 完整 的 基于 模块 


























的 应 用 构建 。 这 套 书 匠心 独 运 ， 专 门 探讨 了 有 关 测 试 的 最 佳 实践 和 部 团 JavaScript 应 用 的 
高 超 技术 。 说 这 套 书 是 O'Reilly 出 版 公司 “JavaScript 图 书 ” 这 顶 王 冠 上 又 一 颗 丙 璨 的 明 

















珠 一 点 也 不 为 过 。 








看 到 尼古拉斯 为 此 付出 的 努力 ， 我 感到 非常 欣慰 ， 因 为 这 本 书 一 看 就 能 给 JavaScript 程序 


员 耳 目 一 新 的 感觉 。 我 第 一 次 见 到 尼古拉斯 是 在 巴黎 的 一 











非常 幽默 。 这 也 促使 我 审阅 了 这 本 书 的 草稿 。 相 信和 最 终 付 
读 ， 也 更 有 意思 。 建 议 你 好 好 读 一 读 这 本 书 ， 从 中 发 现 对 
JavaScript， 最 终 致力 于 为 所 有 人 开发 更 好 的 Web 应 用 。 














JavaScript 之 父 ，Br 


次 晚 碍 上 ， 当 时 对 他 有 了 一 点 了 


解 ， 之 后 就 是 线 上 交流 。 他 写 的 东西 特别 实用 ， 而 且 能 够 体谅 JavaScript 初学 者 ， 同 时 也 


梓 时 ， 拿 到 手 的 成 品 会 更 容易 阅 
自己 有 用 的 东西 ， 进 而 真正 拥抱 


Brendan Eich 
ave 软件 公司 CEO 和 联合 创始 人 
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时 间 倒 回 1998 年 ， 那 时 我 在 学 校 用 FrontPage 做 网 页 。 如 果 当 时 有 人 告诉 我 ， 将 来 我 会 
以 Web 开发 为 业 ， 我 一 定 会 笑 出 声 来 。 之 后 数 年 ，JavaScript 一 直 向 前 发 展 ， 很 难 想象 
Web 离开 JavaScript 是 否 还 能 像 现在 这 样 繁 森 。 本 书 将 一 点 一 点 地 勾勒 出 一 幅 完整 的 现代 


JavaScript 图 景 。 


二 

读者 对 象 

本 书 主要 写 给 Web (前 端 ) 开发 者 、 编 程 爱好 者 和 拥有 JavaScript 实际 开发 经 验 的 程序 员 。 
这 些 人 以 及 想 要 进一步 了 解 JavaScript 语言 的 任何 人 都 可 以 通过 阅读 本 书 受 益 。 


为 什么 编写 本 书 
本 书 旨 在 让 你 轻松 学 习 JavaScript 的 最 新 进展 ， 包 括 ES6 及 后 续 更 新 。ES6 是 这 门 语言 一 
个 里 程 碑 式 的 版 本 ， 它 几乎 与 简化 的 规范 制定 流程 同时 发 布 。 当 时 我 就 围绕 ES6 的 不 同 特 
性 写 了 不 少 博文 ， 受 到 了 很 多 读者 的 喜爱 。 关 于 ES6 的 书 也 不 少 ， 但 这 些 书 与 我 心目 中 的 
关于 ES6 及 其 未 来 的 书 略 有 不 同 。 本 书 在 详细 介绍 ES6 的 新 特性 时 ， 不 会 陷入 规范 、 实 现 
细节 ， 也 不 会 探讨 那些 几乎 不 可 能 遇 到 的 边界 情形 (如 果 这 些 情况 出 现 ， 肯 定 是 要 在 网 上 
查找 相关 资料 的 )。 


本 书 不 贪 大 求全 ， 而 是 专注 于 循序 渐进 的 学 习 过 程 ， 确 保 先 学 内 容 可 以 成 为 后 学 内 容 的 基 
础 ， 避 免 你 为 寻找 某 个 定义 翻 来 翻 去 。 本 书 配备 了 大 量 实用 示例 ， 不 仅 涉 及 ES6， 还 涉及 
2015 年 6 月 (ES6 规范 定稿 时 间 ) 以 后 的 其 他 变化 ， 包 括 异步 函数 、 对 人 象 解构 、 动 态 导 
入 、Promise#finally 和 异步 生成 器 。 


本 书 的 目标 是 确保 你 能 够 顺利 继续 学 习 本 系列 图 书 的 后 续 其 他 分 册 。 在 这 第 一 本 书 的 基础 
上 ， 我 们 将 接着 探讨 模块 化 设计 、 测 试 和 部 署 ， 到 时 就 不 必 再 细 究 代码 示例 中 用 到 的 语法 
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特性 了 。 这 种 递 进 和 模块 化 的 学 习 方 式 体现 在 了 整个 系列 中 ， 包 括 每 一 本 书 、 每 一 章 ， 甚 
至 每 一 市 。 


本 书 内 容 


第 1 章 简 单 介绍 了 JavaScript 及 其 标准 化 过 程 ， 回 顾 其 发 展 ， 概 述 其 现状 ， 并 展望 其 未 来 。 
这 一 章 也 会 简单 介绍 Babel 和 ESLint 这 两 个 现代 JavaScript 开发 必 备 的 工具 。 















































第 2 章 介绍 了 ES6 中 最 基础 的 部 分 ， 包 括 箭头 国 数 、 解 构 、Let 和 const、 模 板 字面 量 以 
及 其 他 语法 方面 的 新 东西 。 








第 3 章 讨论 了 用 于 声明 对 象 原型 的 class 语法 、 名 为 Symbol 的 新 原始 类 型 ， 以 及 0bject 
对 象 的 新 方法 。 














第 4 章 全 面 展示 了 ES6 引入 的 流程 控制 机 制 。 先 从 Promise 开始 ， 然 后 是 迭代 器 、 生 成 器 
和 异步 函数 ， 这 一 章 会 详尽 讨论 每 个 主题 并 配 有 丰富 的 实例 ， 揭 示 所 有 这 些 特性 之 间 的 协 
同 关系 。 这 一 章 不 只 是 为 了 让 你 学 会 使 用 它们 ， 更 希望 你 能 真正 理解 它们 的 最 佳 用 途 ， 从 
而 简化 自己 的 代码 。 























第 5 章 介 绍 了 ES6 内 置 的 新 集合 类 型 set 和 Map，Set 用 于 创建 包含 唯 
于 创建 对 象 映射 。 这 一 章 也 会 给 出 实际 的 应 用 实例 。 


ky 
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直 的 集合 ， Map 用 






































第 6 章 展示 了 新 的 Proxy 和 Reflect 内 置 特性 ， 不 仅 会 介绍 如 何 使 用 代理 ， 还 会 探讨 为 什么 
使 用 它们 时 要 谨慎 。 


第 7 章 主要 讨论 了 ES6 中 的 其 他 改进 ， 特 别 是 与 Array、Math、 数 值 、 字 符 串 、Unicode 和 
正则 表达 式 相 关 的 改进 。 























第 8 章 讨论 了 原生 JavaScript 模块 ， 并 简单 介绍 了 其 诞生 的 历史 ， 最 后 详细 介绍 了 其 语法 。 


第 9 章 的 标题 是 “实用 建议 ”， 这 与 其 他 编程 语言 方面 的 图 书 有 所 不 同 。 我 没有 将 自己 的 
这 些 建 议 放 到 各 个 章节 ， 而 是 将 它们 汇编 到 一 章 。 你 将 在 这 一 章 中 看 到 什么 时 候 该 用 哪 种 
变量 声明 方式 或 字面 量 引 号 ， 异步 代码 流 的 控制 ， 以 及 使 用 类 和 代理 到 底 好 不 好 之 类 的 建 
议和 思 芳 。 
































如 果 你 已 经 比较 熟悉 ES6 了 ， 那 么 建议 你 认真 阅读 第 4 章 ， 其 中 关于 流程 控制 的 部 分 非常 
有 价值 。 第 7 章 和 第 8 章 也 是 必 读 的 ， 因 为 其 中 的 内 容 很 难 在 别处 看 到 。 最 后 一 章 无 疑 会 
激发 你 的 思考 : 在 模块 化 JavaScript 这 个 新 领域 中 ， 什 么 样 的 做 法 合适 ， 什 么 样 的 做 法 不 
可 取 ? 无 论 是 否 同 意 我 的 观点 ， 你 都 会 从 中 受益 颇 多 。 


























排版 约定 
本 书 使 用 了 下 列 排 版 约定 。 


表示 新 术语 和 重点 强调 的 内 容 。 





。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 程序 元 素 ， 比 如 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 
环境 变量 、 语 句 和 关键 字 等 。 





该 图 标 表示 提示 或 建议 。 








O'Reilly Safari 


4 。% Safari (前 身 为 Safari Books Online) 是 一 个 会 员 制 的 培训 和 参考 平 
二 Safafi ,而 i 全、 政府、 教育 从 业者 和 个 人 


Safari 用 户 可 访问 O’Reilly Media、 Harvard Business Review、 Prentice Hall Professional、 
Addison-Wesley Professional、 Microsoft Press、 Sams、Que、Peachpit Press、Focal Press、 
Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、 IBM Redbooks、Packt、 
Adobe Press、 FT Press、 Apress、 Manning、New Riders、McGraw-Hill、Jones & Bartlett、 
Course Technology 等 250 多 家 出 版 社 的 上 千 种 图 书 、 培 训 视频 、 学 习 路 径 、 交 互 式 教 程 和 
精 选 播放 列表 。 


如 需 了 解 更 多 信息 ， 请 访问 http://oreilly.com/safari。 


联系 我 们 


请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 























并 
了 
x 
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美国 : 





O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 

中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 莱 利 技术 咨询 (北京 ) 有限 公司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘误 表 、 示 
例 代码 以 及 其 他 信息 '。 本 书 的 网 站 地 址 是 : http://www.oreilly.com/catalog/0636920047124。 



































对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮 件 到 : 


bookquestions @oreilly.com 








要 了 解 更 多 O’Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 











我 们 在 Facebook 的 地 址 如 下 : 





http://facebook.com/oreilly 


请 关注 我 们 的 Twitter 动态 : 
http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 
http://www.youtube.com/oreillymedia 


致谢 
人 类 做 的 任何 事 都 是 以 其 他 人 的 成 果 为 基础 的 ， 本 书 也 不 例外 。 感 谢 O'Reilly 公司 的 编 
辑 。 首 先是 Nan Barber， 她 对 我 创作 本 书 给 予 了 极 大 的 支持 。 还 有 Ally MacDonald， 她 启 
发 我 以 模块 化 方式 来 写 这 套 书 ， 而 且 帮 助 我 克服 了 项 目 初期 的 困难 。 


本 书 的 技术 审 校 阵容 可 谓 豪华 。 其 中 很 多 人 都 来 自 TC39， 也 就 是 制定 JavaScript 标准 的 委 
员 会 ， 他 们 抽出 宝贵 的 时 间 进 行 审 阅 ， 使 本 书 的 内 容 有 了 保证 。Mathias Bynens ( 曾 任 职 
于 Opera) 帮忙 校对 了 本 书 中 与 Unicode 标准 相关 的 所 有 内 容 ， 确 保 了 书 中 代码 示例 的 高 
度 一 致 。Kent C. Dodds (TC39 成 员 ，PayPal) 创造 性 地 进行 了 视频 评审 ， 指 出 了 一 些 问 



































































































































注 1: 读者 可 访问 本 书 图 灵 社 区 页 面 (http:/www.ituring.com.cn/book/2452) 下 载 示例 代码 并 提交 中 文 版 勘误 。 
一 一 编者 注 
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xvi 脂 癌 


题 ， 进 行 了 质量 把 关 。Jordan Harband (TC39 成 员 ，Airbnb) 对 书 中 讨论 的 很 多 JavaScript 
特性 给 出 了 技术 意见 。Alex Russell (TC39 成 员 ，Google) 帮助 厘清 了 JavaScript 的 历史 及 
有 关 标 准 主 体 的 内 容 。Ingvar Stepanyan (Cloudflare) 也 是 一 位 从 代码 中 挑 错 的 高 手 ， 帮 我 
纠正 了 与 规范 底层 细节 相关 的 错误 。Brian Terlson (TC39 编辑 ，Microsoft) 也 就 TC39 的 
时 间 安 排 和 相关 细节 提供 了 解答 。Rod Vagg (Node.js 项 目 ) 对 本 书 代码 示例 的 风格 统一 和 
更 贴近 主题 提供 了 帮助 。 








Brendan Eich (TC39 成 员 ，Brave CEO) 分 享 了 关于 JavaScript 早期 和 TC39 的 很 多 珍 闻 ， 
这 为 第 一 章 的 内 容 打 下 了 基础 。 如 果 没 有 他 ， 也 就 不 会 有 你 手中 这 本 书 。 
最 后 ， 我 要 感谢 我 的 妻子 Marianela， 感 谢 她 在 我 撰写 本 书 期 间 做 出 的 牺牲 和 对 我 的 宽容 。 
Marian， 没 有 你 ， 我 不 可 能 完成 本 书 ! 


电子 书 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 电子 版 。 


























第 1 章 


ECMAScript 和 JavaScript 的 未 来 





JavaScript 已 经 从 1995 年 的 一 个 为 了 赢得 战略 优势 的 市 场 营 销 策略 ， 变 成 了 如 今 (2017 年 ) 
世界 上 使 用 最 广泛 的 应 用 运行 平台 中 的 核心 编程 语言 。 该 语言 不 再 只 是 在 浏览 器 中 运行 ， 
现在 也 用 于 创建 桌面 和 移动 应 用 ， 还 用 于 硬件 设备 ， 甚 至 是 NASA 的 太空 服 设计 。 


















































JavaScript 是 如 何 做 到 这 一 步 的 ， 接 下 来 它 又 会 怎么 做 呢 ? 


1.1 JavaScript 标准 简 史 


1995 年 ，NetScape 公司 想 要 构建 一 个 动态 的 网 页 ， 但 HTML 无 法 实现 这 一 点 。 为 此 ， 他 
们 雇用 Brendan Eich 专门 为 浏览 器 开发 一 门 功 能 类 似 于 Scheme 的 语言 。Brendan 加 入 之 
后 ， 得 知 上 级 主管 希望 这 门 语言 的 语法 像 Java， 而 且 这 一 决定 已 经 开始 实施 。 











Brendan 花 10 天 写 出 了 JavaScript 的 第 一 个 原型 ， 主 要 实现 了 Scheme 的 一 类 函数 和 Self 
的 原型 等 构造 。 这 个 初始 版 JavaScript 的 代号 为 Mocha。 它 没有 数组 ， 没 有 对 象 字 面 量 ， 
任何 错误 都 会 给 出 警告 。 此 外 ， 它 也 没有 异常 处 理 ， 这 也 是 如 今 仍 有 很 多 操作 返回 NaN 或 
undefined 的 原因 。Brendan 对 DOM0 级 和 JavaScript 第 一 个 版 本 的 实现 成 为 了 这 门 语言 标 
准 化 的 基础 。 






































1995 年 9 月 ，Netscape Navigator 2.0 beta 版 发 布 ，JavaScript 的 修订 版 也 内 置 其 中 ， 对 外 
宣传 时 名 叫 LiveScript。 同 年 12 月 ，Navigator 2.0 beta 3 发 布 ， 此 时 LiveScript 又 重新 命名 
为 JavaScript (后 成 为 Sun 的 注册 商标 ，Sun 现在 是 Oracle 旗下 公司 )。 这 次 发 布 后 不 久 ， 
Netscape 公司 推出 了 服务 器 端 JavaScript 的 实现 ， 用 于 在 Netscape Enterprise Server 上 运行 脚 











本 ， 并 将 其 命名 为 LiveWire。'1996 年 ， 微 软 在 IE3 中 推出 JScript， 即 通过 逆向 工程 实现 的 
JavaScript。JScript 在 服务 器 端 也 可 以 在 互联 网 信息 服务 器 (IIS，Internet information server) 
中 运行 。 

1996 年 ，ECMA 的 一 个 技术 委员 会 TC39 将 JavaScript 以 名 称 ECMAScript (ES) 标准 化 
为 ECMA-262 规范 。 为 什么 叫 ECMAScript 呢 ? 因为 Sun 不 同意 将 JavaScript 商标 转让 给 
ECMA， 虽然 微软 提议 叫 JScript， 但 其 他 成 员 公司 又 不 想 用 ， 结 果 就 只 能 使 用 ECMAScript 
这 个 尴 座 的 名 字 。 











当时 ，TC39 开会 主要 就 是 争论 该 采用 Netscape 的 JavaScript， 还 是 微软 的 JScript。 尽 管 如 
此 ， 该 委员 会 还 是 取得 了 成 果 ， 他 们 坚定 不 移 地 支持 向 后 兼容 ， 推 动 引 入 了 严格 相等 运算 
符 (=== 和 !==)， 不 会 影响 依赖 松散 相等 比较 算法 的 现 有 程序 。 


ECMA-262 的 第 一 版 于 1997 年 6 月 发 布 。 次 年 6 月 ， 国 际 标准 化 组 织 对 这 个 规范 进行 了 
完善 和 认真 审查 ， 并 以 ISO/IEC 16262 的 形式 发 布 ， 这 就 是 它 的 第 二 版 。 
































1999 年 12 月 发 布 的 第 三 版 标准 化 了 正则 表达 式 、switch 语句 、do/whiLLe、try/catch、 
0bject#hasOwnProperty， 以 及 其 他 一 些 特性 。 其 中 大 部 分 特性 已 经 可 以 在 Netscape 的 
JavaScript 运行 环境 SpiderMonkey 中 使 用 。 





之 后 不 久 ，TC39 发 布 了 ES4 规范 的 草案 。ES4 的 早期 工作 直接 导致 了 2000 年 年 中 JScript 
NET 的 产生 ?， 并 最 终 促 进 2006 年 Flash 中 ActionScript 3 的 诞生 。5 








此 时 ， 关 于 JavaScript 应 该 朝 哪个 方向 发 展 的 不 同意 见 导 致 了 规范 制定 工作 停滞 不 前 。 对 
于 Web 标准 的 发 展 而 言 ， 这 时 的 情形 很 微妙 : 微软 几乎 垄断 了 Web 行业 ， 却 对 制定 标准 
2003 年 , AOL 裁 掉 了 50 名 Netscape 员工 4， Mozilla 基金 会 随 之 成 立 。 同 时 , 由 于 微软 占据 
了 超过 95% 的 Web 浏览 器 市 场 份额 ，TC39 被 迫 解散 。 


直到 两 年 后 ，Brendan 在 Mozilla 以 Firefox 日 益 增 长 的 市 场 份额 为 杠杆 使 得 微软 回归 ， 
ECMA 才 得 以 重新 开始 TC39 的 相关 工作 。2005 年 年 中 ，TC39 再 次 开始 召开 定期 会 议 。 
对 于 ES4， 计 划 引 入 模块 系统 、 类 、 返 代 器 、 生 成 器 、 解 构 、 类 型 广 释 、 尾 调用 优化 、 代 
数 类 型 以 及 其 他 各 类 功能 。 这 次 的 新 增 内 容 过 于 庞大 ， 导 致 ES4 一 次 又 一 次 地 延期 了 。 


2007 年 ，TC39 分 裂 为 两 派 : 一 派 主张 推出 ES3.1， 即 只 在 ES3 的 基础 上 完善 改进 ， 另 一 









































注 1: 1998 年 的 这 个 小 册子 (https://docs.oracle.com/cd/E19957-01/816-6411-10/contents.htm) 详细 介绍 了 服 
务 器 端 JavaScript 以 及 LiveWire 的 方方面面 。 

注 2; 可 以 在 微软 网 站 上 找到 最 初 的 公告 (2000 年 7 月 )。 

注 3: Brendan Eich 在 播客 JavaScript Jabber 中 介绍 了 很 多 关于 JavaScript 起 源 的 故事 。 

注 4: 2003 年 7 月 的 The Mac Observer 有 该 新 闻 的 相关 报道 。 
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派 则 主张 推出 ES4， 新 特性 繁多 ， 且 玻 待 规范 化 。 直 到 2008 年 8 月 ,两 派 才 就 ES3.1 达成 
一 致 ，ES3.1 后 来 又 发 展 为 ES5。ES4 的 提议 似乎 废弃 了 ， 但 实际 上 其 中 很 多 特性 最 终 写 
进 了 ES6 (达成 和 解 时 美 其 名 日 Harmony， 即 “和 谐 ”) ， 当 然 ， 甚 中 一 些 特性 还 在 讨论 ， 
另外 少数 特性 确实 已 经 废弃 、 被 拒 或 撤销 。ES3.1 也 为 ES4 的 逐步 实现 奠定 了 基础 。 























2009 年 12 月 ，ES3 发 布 10 周年 ， ECMAScript 第 五 版 发 布 。 这 一 版 汇集 了 当时 浏览 器 中 
业已 存在 的 扩展 ， 或 者 说 “事实 标准 ”， 增 加 了 get 和 set 存 取 器 ， 增 强 了 Array 原型 的 函 
数 特性 ， 还 引入 了 反射 和 内 省 机 制 ， 以 及 对 JSON 解析 和 严格 模式 的 支持 。 


2011 年 6 月 ， 经 过 再 次 审查 和 编辑 ， 该 规范 形成 了 第 三 版 的 国际 标准 ISO/IEC 16262:2011， 
并 作为 ECMAScript 5.1 发 布 。 

















2015 年 6 月 ，TC39 又 花 4 年 完成 了 ECMAScript 6。 第 六 版 是 该 语言 面世 以 来 改动 最 大 的 
一 个 版 本 ， 实 现 了 许多 ES4 中 被 推迟 到 Harmony 中 的 提案 。 本 书 主要 探讨 的 就 是 ES6。 

















在 ES6 的 制定 过 程 中 ， 另 一 个 旨 在 推动 Web 发 展 的 组 织 WHATWG (网 页 超 文本 应 用 技 
术 工 作 小 组 ) 于 2012 年 推出 了 一 个 文档 ， 以 记录 ES5.1 和 浏览 器 实现 在 兼容 性 和 可 操作 
性 方面 的 差异 。 这 个 工作 小 组 标准 化 了 之 前 规范 中 没有 提 及 的 String#substr， 统 一 了 在 
HTML 标签 中 包装 字符 串 的 几 种 方法 ， 明 确 写 出 了 0bject.prototype 中 的 _proto “和 
__defineGeter 等 原型 属性 ， 同 时 还 做 出 了 其 他 一 些 改进 。" 这 些 工作 最 终 形成 了 一 份 独 
立 的 Web ECMAScript 规范 ， 最 终于 2015 年 被 加 入 到 附录 B 中 。 附 录 B 是 ECMAScript 
核心 规范 中 的 参考 部 分 ， 这 意味 着 浏览 器 可 以 不 遵照 其 进行 实现 。 此 次 更 新 之 后 ， 附 录 B 
也 成 为 了 Web 浏览 器 的 规范 和 要 求 。 


第 六 版 是 JavaScript 历史 上 一 个 意义 重大 的 里 程 碑 。 除 了 众多 新 功能 之 外 ，ES6 也 是 
ECMAScript 成 为 持续 迭代 标准 的 一 个 转折 点 。 


1.2 ”持续 迭代 的 ECMAScript 


ES3 在 10 年 内 未 有 重大 改变 ， 之 后 4 年 才 推 出 ES6。 这 一 漫长 历程 清楚 地 表明 TC39 流程 
需要 改进 。 之 前 的 修订 流程 是 最 终 发 布 日 期 驱动 的 。 只 要 有 议题 未 能 达成 一 致 ， 下 次 修订 
就 会 变 得 遥遥 无 期 。 时 间 一 长 又 会 有 新 的 特性 提出 ， 进 而 导致 更 多 拖延 。 小 的 修订 总 会 因 
大 的 新 增 而 拖延 ， 而 大 的 新 增 迫 于 最 终 发 布 日 期 的 压力 ， 就 会 仓促 通过 修订 ， 以 免 造成 一 
拖 再 拖 。 


ES6 发 布 后 ，TC39 优化 了 提案 修订 的 流程 ”， 以 满足 现代 预期 迭代 具有 经 常 性 和 一 贯 性 ， 
且 规范 的 制定 要 更 加 民主 化 。 基 于 这 一 点 ，TC39 不 再 采用 古老 的 Word 文档 形式 ， 而 是 使 







































































注 5: 2008 年 ,Brendan Eich 给 es-discuss 发 了 一 封 邮件 ,其 中 介绍 了 当时 的 情况 ,此 时 距 ES3 发 布 都 快 10 年 了 。 
注 6: 要 想 了 解 将 Web ECMAScript 规范 合并 到 主干 时 所 做 的 全 部 更 改 ， 请 参见 WHATWG 博客 。 
注 7: 2013 年 9 月 的 PPT，Post-ES6 Spec Process， 介 绍 了 优化 后 的 提案 修订 流程 。 
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用 Ecmarkup (用 于 编写 ECMAScript 规范 的 HTML 语言 的 超 集 ) 和 GitHub 来 提交 需求 ， 
大 大 增加 了 非 成 员 的 提案 数量 *， 他 们 就 像 是 外 在 的 参与 者 一 样 。 这 种 新 形式 是 持续 的 ， 并 
且 更 加 透明 : 最 新 的 规范 草案 随时 可 以 查看 ， 而 无 须 像 之 前 那样 ， 必 须 从 网 页 下 载 Word 
文档 或 PDF 版 本 。 











Firefox、Chrome、Edge、Safari 以 及 Node.js 对 ES6 规范 的 支持 均 已 超过 95%”。 现 在 我 们 
就 可 以 在 这 些 浏 览 器 中 使 用 已 经 支持 的 功能 ， 而 不 用 等 到 它们 对 ES6 的 支持 度 达 到 100%。 
新 的 流程 引入 了 4 个 不 同 的 成 熟 度 阶段 。" 提案 越 成 熟 ， 最 终 添加 到 规范 中 的 可 能 性 越 大 。 


只 要 还 未 作为 正式 提案 提交 ， 关 于 修改 或 新 增 内 容 的 任何 讨论 、 想 法 或 者 提议 都 会 被 视 为 
有 前 途 的 “稻草 人 ”提案 (阶段 0), 但 只 有 TC39 委员 会 的 成 员 才 可 以 创建 “ 称 草 人 ” 提 
案 。 在 编写 本 书 时 ， 有 10 多 个 活跃 的 “稻草 人 ”提案 。" 

















阶段 1 表示 提案 被 正式 提出 ， 和 希望 能 够 解决 各 方 关注 的 问题 ， 厘 清 与 其 他 提案 的 交集 ， 并 
实现 问题 。 这 一 阶段 的 提案 需要 明确 描述 一 个 具体 的 问题 ， 并 给 出 该 问题 的 具体 解决 方 
案 。 阶 段 1 的 提案 通常 包括 以 下 几 方 面 的 内 容 : 高 级 API 描述 、 演 示 性 的 用 法 示例 、 内 部 
语义 和 算法 的 讨论 。 阶 段 1 的 提案 可 能 会 随 着 流程 的 推进 而 发 生 很 大 的 改变 。 


阶段 2 的 提案 是 规范 的 初步 草案 。 从 这 一 步 开始 ， 需 要 在 运行 环境 中 验证 具体 的 实现 。 
实现 的 方式 可 以 是 腻子 脚本 〈polyfll) 、 能 让 运行 环境 支持 提案 的 用 户 代码 、 原 生 支持 提 
案 内 容 的 引擎 实现 ， 也 可 以 是 使 用 构建 工具 将 源 代 码 转换 、 编 译 成 现 有 引擎 可 以 执行 的 
代码 。 


阶段 3 的 提案 是 候选 推荐 提案 。 只 有 规范 的 编辑 和 指定 的 审查 人 员 在 最 终 的 规范 上 签字 确 
认 ， 提 案 才能 进入 阶段 3。 另 外 ， 还 需要 实现 者 表示 出 对 该 提案 感 兴趣 。 实 际 上 ， 只 有 满 
足以 下 3 个 条 件 之 一 ， 提 案 才能 进入 阶段 3: 某 个 浏览 器 已 经 实现 该 提案 ， 有 高 度 吻合 的 
腻子 脚本 ， 有 类 似 Babel 的 实时 编译 工具 的 支持 。 除 了 修复 使 用 过 程 中 新 发 现 的 问题 ， 阶 
段 3 的 提案 不 会 再 有 其 他 改动 。 


要 想 进入 阶段 4， 提案 必 须 有 两 个 独立 的 实现 方案 通过 验收 测试 。 进 入 阶段 4 的 提案 最 终 
会 添加 到 ECMAScript 的 下 一 版 中 。 


从 现在 开始 ，ECMAScript 预计 每 年 都 会 发 布 新 版 本 。 为 了 与 年 度 发 版 计划 统一 ， 规 范 的 
版 本 从 现在 开始 与 出 版 的 年 份 相关 联 。 因 此 ，ES6 也 就 是 ES2015， 之 后 将 有 ES2016 (而 
不 是 ES7)、ES2017， 等 等 。 实 际 上 ，ES2015 这 个 称呼 并 没有 被 接受 ， 大 家 还 是 习惯 称 其 
为 ES6。ES2016 也 是 在 命名 约定 改变 前 就 发 布 了 的 ， 因 此 有 时 人 们 也 称 其 为 ES7。 由 于 


















































注 8: TC39 采纳 的 提案 参见 https://mjavascript.com/out/tc39-proposals。 

注 9: ES6 的 浏览 器 兼容 性 报告 参见 https://kangax.github.io/compat-table/es6/。 

注 10: TC39 的 提案 流程 文档 参见 https://tc39.github.io/process-document/。 

注 11: “ 称 草 人 ”提案 参见 https://github.com/te39/proposals/blob/master/stage-0-proposals.md。 
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ES6 这 一 名 称 已 经 为 社区 普遍 接受 ， 我 们 抛 开 不 谈 。 最 终 的 规范 版 本 将 是 ES6、ES2016、 
ES2017、ES2018， 以 此 类 推 。 





调整 后 的 提案 流程 加 上 每 年 都 发 布 一 版 的 强制 约定 形成 了 更 加 一 致 的 发 布 过 程 。 这 也 意味 
着 规范 的 修订 版 本 号 变 得 不 再 那么 重要 。 现 在 的 重点 是 提案 的 不 同 阶段 ， 我 们 相信 将 来 大 
家 会 越 来 越 少 提 及 ECMAScript 标准 的 某 个 特定 修订 版 。 


1.3 浏览 器 支持 和 辅助 工具 


如 有 果 能 够 有 两 个 JavaScript 引擎 提供 独立 的 实现 ， 阶 段 3 的 候选 推荐 提案 最 有 可 能 进入 下 
一 个 版 本 的 规范 之 中 。 实 际 上 ， 只 要 阶段 3 的 提案 有 实验 性 的 引擎 实现 或 者 腻子 脚本 ,再 
或 者 可 以 通过 编译 器 得 到 支持 ， 那 么 就 已 经 能 够 安全 地 在 实际 开发 中 使 用 了 。 其 实 ， 阶段 2 
和 更 早 阶 段 的 提案 也 有 为 JavaScript 开发 人 员 所 使 用 的 ， 这 也 加 强 了 实现 者 和 使 用 者 之 间 
的 反馈 循环 。 





















































Babel 等 将 代码 作为 输入 并 生成 Web 平台 原生 支持 的 输出 (HTML、CSS 或 JavaScript) 的 
编译 器 通常 称 为 转译 器 (transpiler) ， 它 是 编译 器 的 一 个 子 集 。 如 果 我 们 想 要 在 代码 中 使 用 
某 个 JavaScript 引擎 还 没有 普遍 实现 的 提案 ，Babel 之 类 的 编译 器 可 以 帮 我 们 将 相应 的 代码 
转换 成 现 有 JavaScript 实现 可 以 运行 的 代码 。 


























代码 转换 是 在 构建 时 完成 的 ， 因 此 用 户 拿 到 的 是 自己 的 JavaScript 运行 环境 所 支持 的 代码 。 
这 一 机 制 降低 了 对 运行 环境 的 要 求 ， 也 让 JavaScript 开发 者 能 够 更 早 地 使 用 新 的 语言 功能 
和 语法 。 对 于 规范 的 编写 者 和 实现 者 来 说 ， 这 也 是 非常 有 利 的 ， 因 为 这 样 他 们 就 可 以 得 到 
可 行 性 、 迫 切 性 、 可 能 存在 的 bug ， 以 及 边界 用 例 等 方面 的 反馈 。 














转译 器 可 以 将 ES6 代码 转换 成 浏览 器 普遍 可 以 解释 的 ES5 代码 。 这 是 如 今 在 生产 环境 中 运 
行 ES6 代码 的 最 可 靠 方 式 : 通过 构建 生成 ES5 代码 ， 这 样 新 旧 浏 览 器 都 可 以 执行 。 





这 种 方式 同样 适用 于 ES7 及 后 续 版 本 。 由 于 语言 规范 每 年 都 会 发 布 新 版 本 ， 我 们 可 以 期 
待 编 译 器 支持 ES2017 输入 、ES2018 输入 ， 等 等 。 同 样 ， 随 着 浏览 器 的 支持 度 越 来 越 好 ， 
编译 器 可 以 逐渐 降低 支持 ES6 输出 、ES7 输出 的 复杂 性 。 从 这 种 意义 上 说 ， 我 们 可 以 将 
JavaScript 转译 器 看 作 移 动 的 窗口 ， 其 输入 是 使 用 最 新 语法 编写 的 代码 ， 输 出 是 不 影响 浏 
览 器 运行 的 最 新 代码 。 


接 下 来 我 们 探讨 如 何在 工作 中 使 用 Babel。 














ay 
































1.3.1 Babel 转 译 器 简介 
Babel 可 以 将 ES6 代码 编译 成 ES5 代码 。 生 成 的 ES5 代码 很 容易 看 懂 ， 因 此 非常 适合 还 不 
完全 熟悉 新 特性 的 人 来 理解 新 特性 。 
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Babel 的 在 线 读 取 - 求 值 -打印 循环 (REPL，read-evaluate-print loop) 转换 器 是 学 习 ES6 
的 好 帮手 ， 无 须 安 装 Node.js、babel CLI， 也 无 须 手 工 编译 源码 。 


REPL 提供 了 一 个 源码 输入 框 ， 用 于 自动 实时 编译 ， 编 译 后 的 代码 位 于 源码 右 侧 。 


TH 





我 们 可 以 在 REPL 中 写 儿 行 代码 ， 如 下 所 示 。 


var double = value => value * 2 

console.log(double(3)) 

// <- 6 
我 们 可 以 在 右 侧 看 到 转换 后 的 ES5 等 价 代 码 ， 如 图 1-1 所 示 。 更 新 源码 时 ， 转 译 结果 也 会 
实时 更 新 。 


























© Babel:Thecompilerforwritin x 办 
Me CGC @ Secure https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-... 妆 加 埃 : 
PBIBEL Learn ES2015 Docs ~ 轩 GUR Blog FAQ Q Forum @ YW OO 





图 Evaluate Presets: es2015, react, stage-0, stage-1, stage-2 ~ 国 Line Wrap 国 Minify (Babili) Babel 6.21.1 


1 var double = value => value * 1 

2 console.log(double(3)) 

3 // <- 6 var double = function double( ){ 
urn value * 2; 

}; 

console. log(double(3)); 


Janawn 


6 











1-1: 在 线 Babel REPL 是 交互 式 学 习 ES6 的 好 工具 





Babel REPL 也 是 用 于 试验 本 书 中 介绍 的 一 些 特性 的 有 效 工 具 。 但 需要 知道 的 是 ，Babel 并 
不 转换 新 的 内 置 对 象 ， 如 Symbol、Proxy 和 WeakMap。 这 些 引 用 会 原封 不 动 地 保留 下 来 ， 最 
终 由 执行 Babel 输出 代码 的 运行 环境 提供 这 些 内 置 对 象 。 如 果 想 要 支持 还 没有 实现 这 些 内 
置 对 象 的 运行 环境 ， 可 以 在 代码 中 引入 babel-polyfill 包 。 


在 一 些 较 老 的 JavaScript 版 本 中 ， 想 要 语义 正确 地 实现 某 些 特性 是 很 难 的 ， 甚 至 完全 不 可 
能 。 此 时 可 以 用 腻子 脚本 弥补 这 个 问题 ， 但 腻子 脚本 通常 不 能 覆盖 所 有 情况 ， 因 此 需要 做 
一 些 有 尼 协 。 所 以 ， 在 将 转译 后 的 使 用 了 内 置 对 象 和 腻子 脚本 的 代码 发 布 到 生产 环境 之 前 ， 
最 好 多 做 一 些 测 试 。 


考虑 到 这 种 情况 ， 最 好 还 是 等 浏 览 器 整体 支持 这 些 新 的 内 置 对 象 时 再 使 用 它们 。 我 们 建议 
你 使 用 不 依赖 于 这 些 新 内 置 对 象 的 替代 方案 。 与 此 同时 ， 学 习 这 些 特性 也 很 重要 ， 这 样 我 
们 对 JavaScript 语言 的 理解 才 不 会 落后 。 























Chrome、Firefox 和 Edge 等 现代 浏览 器 现在 已 经 支持 ES2015 及 后 续 版 本 的 大 部 分 内 
容 ， 所 以 在 支持 的 前 提 下 ， 可 以 通过 它们 的 开发 者 工具 来 尝试 新 特性 。 产 品级 应 用 需要 
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依赖 新 JavaScript 特性 时 ， 还 是 推荐 使 用 转换 器 进行 编译 处 理 ， 这 样 应 用 能 够 支持 更 多 的 


JavaScript 运行 环境 。 





除了 REPL，Babel 还 提供 了 一 个 在 命令 行 中 运行 的 Nodejs 包 ， 可 以 通过 Nodejs 的 包 管 
理工 具 npm 来 安装 它 。 


下 载 Nodejs。 安 装 node 后 ， 就 可 以 在 终端 内 使 用 npm 命令 了 。 











开始 之 前 ， 我 们 先 创建 一 个 项 目 目录 以 及 一 个 用 于 描述 Nodejs 应 用 的 package.json 文件 。 
可 以 通过 npm 在 命令 行 中 创建 package.json 文件 。 








mkdir babeL-setup 
cd babeL-setup 
npm init - -yes 





执行 init 命令 时 传递 - -yes 参数 表示 不 用 询问 我 们 ， 可 以 使 用 npm 提供 的 默 
认 值 来 配置 package.json 文件 。 


再 创建 一 个 example.js 文件 ， 并 在 其 中 加 入 以 下 代码 ， 然 后 将 其 保存 到 刚刚 创建 的 babel- 
setup 目录 下 的 src 子 目 录 。 





var double = value => vaLue * 2 
console.log(double(3)) 
// <- 6 


在 常用 的 终端 中 输入 以 下 两 行 命令 即 可 安装 Babel。 





npm install babel-cli@6 --save-dev 
npm install babel-preset-env@6 --save-dev 





通过 npn 安装 的 包 存 放 于 项 目 根 目录 的 node modules 目录 下 。 可 以 通过 创建 
npm script 命令 或 使 用 require 声明 来 访问 这 些 包 。 

--save-dev 参数 会 将 所 安装 的 包 作 为 开发 依赖 添加 到 package.json 文件 中 。 
这 样 一 来 ， 当 我 们 将 项 目 移 植 到 一 个 新 环境 时 ， 只 须 运 行 npm install 命令 
就 可 以 重新 安装 每 个 依赖 。 

@ 符 号 指明 了 包 的 特定 版 本 。 使 用 @6 则 是 告诉 npm 安装 babel-cli 的 6.x 版 
本 中 最 新 的 一 个 。 这 种 偏好 限制 可 以 确保 我 们 的 应 用 将 来 不 出 问题 ， 因 为 它 
可 以 确保 永远 不 会 安装 7.9.9 或 后 续 版 本 ， 从 而 避免 了 7.9.9 之 后 的 版 本 包 
含 当前 无 法 预见 的 破坏 性 变化 。 
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接 下 来 ， 我 们 修改 package.json 中 的 scripts 属性 的 值 ， 如 下 所 示 。babel-cli 提供 的 








babel 命令 行 工具 可 以 获取 src 目录 下 的 全 部 内 容 ， 将 它们 编译 成 目标 输出 格式 ， 并 将 结果 


保存 到 dist 目录 中 ， 并 且 保 留 文 件 的 原始 目录 结构 。 
{ 


"scripts": { 
"build": "babel src --out-dir dist" 
3 
} 


加 上 前 面 安装 的 包 ， 现 在 我 们 构成 了 以 下 这 个 超 小 的 package.json 文件 。 


"scripts": { 
"build": "babeL src --out-dir dist" 
]， 
"devDependencies": { 
"babel-cli": "^6.24.0", 
"babel-preset-env": "^1.2.1" 
3 

















scripts 对 象 中 列举 的 所 有 命令 都 可 以 通过 npm run <name> 执行 ， 这 种 执行 
方式 会 临时 修改 环境 变量 $PATH 的 值 ， 这 样 我 们 才 可 以 在 系统 未 全 局 安装 
babel-cli 的 情况 下 找到 babel-cli 并 在 命令 行 执行 。 



































如 果 现 在 在 终端 内 执行 npm run build， 你 就 能 看 到 生成 后 的 dist/example.js 文件 。 输 出 的 
文件 和 源 文件 完全 相同 。 这 是 因为 Babel 还 不 知道 编译 的 目标 格式 ， 我 们 需要 先 配 置 它 。 








在 package.json 旁 创 建 一 个 .babelrc 文件 ， 并 在 其 中 写 入 以 下 JSON。 


{ 


"presets": ["env"] 


} 











这 里 的 env 就 是 前 面 通过 npm 安装 的 babel-preset-env， 它 给 Babel 添加 了 一 系列 插 们 
以 便 将 不 同 的 ES6 代码 转换 为 ES5。 这 个 预 设 包含 很 多 插件 ， 其 中 就 有 插件 将 example. 
js 中 的 箭头 函数 转换 成 ES5 代码 。env 预 设 会 根据 最 新 浏览 器 已 经 支持 的 特性 启用 相关 
转换 插件 。 这 个 预 设 是 可 配置 的 ， 我们 可 以 决定 向 后 兼容 到 哪个 浏览 器 。 兼 容 的 浏览 器 
多 ,编译 生成 的 包 就 越 大 ;兼容 的 浏览 器 越 少 ， 能 满足 的 用 户 就 越 少 。 当 然 ， 到 底 什么 
置 最 合适 ， 最 终 还 是 要 经 过 研究 才能 决定 。 默 认 配置 是 启用 所 有 转换 插件 ， 兼 容 尽 可 能 




















的 运行 环境 。 
再 运行 一 次 编译 脚本 就 能 够 看 到 输出 的 ES5 代码 了 。 
”npm run build 


» Cat dist/example.js 
"use strict" 


让 


的 
越 
配 
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var double = function double(value) { 
return valuye * 2 


console.log(double(3)) 
// <- 6 


接 下 来 我 们 再 介绍 一 个 代码 检查 工具 esLint， 它 可 以 帮助 我 们 确保 项 目 代 码 的 质量 。 


1.3.2 ”使 用 ESLint 提 高 代码 质量 和 一 致 性 

开发 项 目 时 ， 我 们 会 发 现 宛 余 或 无 用 的 代码 ， 编 写 很 多 新 代码 ， 删 除 无 关 或 没 必 要 的 功能 ， 
也 会 为 适应 新 架构 而 来 回 搬运 代码 。 随 着 代码 越 写 越 多 ， 团 队 规模 也 会 随 之 变化 。 刚 开始 可 
能 只 有 几 个 人 ， 甚 至 只 有 一 个 人 ， 但 随 着 项 目 规 模 越 来 越 大 ， 参 与 编码 的 人 也 会 越 来 越 多 。 


代码 检查 工具 可 以 帮助 我 们 发 现 语法 错误 。 现 代 检查 工具 通常 都 是 可 定制 的 ， 人 允许 我 们 建 
立 适合 自己 团队 的 代码 约定 。 坚 守 一 致 的 代码 风格 和 质量 基准 可 以 使 团队 的 编码 风格 趋 于 
一 致 。 不 同 的 团队 成 员 可 能 会 对 代码 风格 有 不 同 的 意见 ， 但 有 了 代码 检查 工具 和 协商 一 致 
的 配置 后 ， 这 些 意 见 就 变 成 了 明确 可 遵循 的 规则 。 












































首先 是 确保 程序 能 被 解析 ， 其 次 可 能 要 防止 throw 抛 出 字符 串 字 面 量 作为 异常 ， 或 者 不 允 
许 在 生产 环境 中 使 用 console.log 和 debugger 语句 。 然 而 ， 要 求 所 有 函数 调用 都 只 能 有 一 
个 参数 就 有 点 过 了 。 


虽然 代码 检查 工具 能 够 定义 并 强制 推行 一 种 编码 风格 ， 但 定义 规则 时 也 不 能 太 任性 。 如 果 
规则 太 严 格 ， 可 能 会 影响 开发 效率 ， 得 不 偿 失 。 反 之 ， 规则 太 宽松 的 话 ， 代 码 就 不 能 保持 
统一 风格 。 











要 想 把 握 好 这 个 度 ， 就 应 该 尽量 不 使 用 多 数 情 况 下 都 不 能 改善 程序 的 规则 。 新 增 一 条 规则 
时 ， 应 当 拉 心 自问， 添加 它 能 否 显著 改善 现 有 代码 库 以 及 未 来 的 新 代码 ? 

















ESLint 是 一 个 现代 代码 检查 工具 ， 它 集合 了 一 些 插 件 ， 具 有 不 同 的 规则 ， 支 持 自 定义 。 我 
们 可 以 决定 不 遵守 规则 时 是 输出 警告 还 是 导致 停机 错误 。 与 安装 babel 一 样 ， 我 们 也 可 以 
通过 npm 安装 esLint。 





npm install eslint@3 --save-dev 








接 下 来 我 们 需要 配置 ESLint。 因 为 本 地 安装 了 esLint， 所 以 可 以 在 node_modules/.bin 中 找 
到 它 的 命令 行 工具 。 执 行 以 下 命令 能 够 引导 我 们 配置 ESlint。 首 先 ， 告 诉 它 我 们 想 使 用 一 
套 流 行 的 风格 ， 然 后 选择 Standard"， 最 后 选择 JSON 格式 的 配置 文件 。 

































































注 12: 注意 , Standard 是 一 种 自我 宣告 , 并 未 由 任何 官方 组 织 进行 实际 的 标准 化 。 其 实 , 只 要 能 够 保持 统一 ， 
使 用 哪 种 风格 并 不 重要 。 在 阅读 项 目 代码 时 ， 一 致 性 有 助 于 减少 困扰 。Airbnb 风格 指南 也 是 很 受 欢 
迎 的 ， 与 Standard 不 同 ， 它 默认 不 可 省 略 分 号 。 
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./node_moduLes/ .bin/esLint --init 
? How would you like to configure ESLint? 
Use a popular style guide 
? Which style guide do you want to follow? Standard 
? What format do you want your config file to be in? JSON 


除了 个 别 规则 ，eslint 还 支持 扩展 预定 义 规则 ， 这 些 规 则 以 Nodejs 包 的 形式 存在 。 在 多 
项 目 甚至 社区 中 共享 配置 时 ， 这 会 很 方便 。 选 择 Standard 后 ， 可 以 看 到 ESLint 向 package. 
json 中 添加 了 一 些 依赖 ， 即 包含 预 设 Standard 规则 的 包 ， 同 时 创建 了 一 个 名 为 .eslintrc.json 
的 文件 ， 其 中 包含 以 下 内 容 。 


{ 


"extends": "standard", 
"plugins": [ 
"standard", 
"promise" 
] 
} 


直接 引用 包含 npm 实现 细节 的 node modules/.bin 目录 并 不 好 。 虽 然 前 面 初始 化 ESLint 配置 


时 这 么 引用 了 ,但 其 实 应 该 避免 这 样 做 ,而且 检 查 代码 时 也 不 应 该 每 次 都 那么 输入 一 遍 。 
为 此 ， 我 们 在 packge.json 中 添加 一 个 脚本 命令 。 


€ 
"scripts": { 
"lint": "eslint . 
} 
} 


前 面 安装 Babel 时 提 到 过 ，npm run 在 执行 脚本 命令 时 会 将 node_modules 加 入 PATH 环境 变 
量 。 这 样 一 来 ， 在 检查 代码 时 ， 只 要 执行 npm run Lint，npnm 就 会 在 node_ modules 目录 中 
找到 ESLint CLI。 

































































我 们 来 看 看 以 下 的 示例 文件 examplejs， 其 中 的 代码 故意 没有 遵守 规则 ， 以 演示 ESLint 具 
体 做 了 什么 。 


var goodbye='Goodbye!' 


function hello(){ 
return goodbye} 


if(false){} 


执行 Lint 脚本 命令 时 ，ESLint 会 标识 文件 中 所 有 错误 的 地 方 ， 如 图 1-2 所 示 。 























图 1-2: ESLint 可 以 帮助 我 们 检查 语法 错误 ， 保 持 代 码 风格 统一 


如 果 在 执行 命令 时 传递 --fix 参 数 ， 那 么 ESLint 能 够 自动 修复 大 多 数 的 风格 问题 。 在 
packagejson 中 加 入 以 下 脚本 命令 。 





{ 
"scripts": { 
"lint-fix": "eslint . --fix" 
} 
} 


此 时 执行 Lint-fix 只 会 看 到 两 个 错误 : 未 使 用 hetto 以 及 false 是 一 个 不 变 的 条 件 。 其 他 
错误 都 已 经 修复 了 ， 结 果 如 以 下 代码 所 示 。 上 述 两 个 错误 没有 修复 ， 因 为 ESLint 会 保持 中 
立 ， 不 对 代码 语义 做 预 设 推断 ， 以 免 导致 语义 改变 。 这 样 一 来 ，--fix 就 能 帮助 我 们 有 效 
解决 编码 风格 问题 ， 同 时 又 不 会 破坏 逻辑 。 


var goodbye = 'Goodbye!' 


function hello() { 
return goodbye 


} 
if (false) {} 
prettier 也 是 一 种 代码 检查 工具 ， 可 用 于 自动 格式 化 代码 。 我 们 可 以 配置 


prettier 自动 重 写 代 码 ， 以 确保 代码 遵循 设 定 的 首选 项 ， 如 使 用 给 定 的 空格 
缩 进 ， 统 一 使 用 单 引 号 或 双 引 号 ,末尾 自动 加 逗号 ， 或 者 限制 最 大 行 长 度 。 























现在 我 们 知道 了 如 何 将 现代 Javascript 代码 编译 成 每 个 浏览 器 都 能 理解 的 代码 ， 以 及 如 何 
正确 检查 和 格式 化 代码 。 接 下 来 概述 一 下 ES6 的 特性 ， 并 展望 一 下 JavaScript 的 未 来 。 


1.4 ES6 特 性 


ES6 规范 足 足 有 5$66 页 ， 是 ES5.1 规范 258 页 的 两 倍 多 。ES6 的 主要 变化 可 以 归纳 为 以 下 
几 类 : 
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。 语法 糖 

。 新 机 制 

。 更 好 的 语义 

。 更 多 的 内 置 对 象 和 方法 

。 对 原 有 限制 的 非 破坏 性 解决 方案 


语法 糖 是 ES6 中 最 重要 的 组 成 部 分 ， 包 括 用 新 类 来 表达 对 象 继承 、 箭 头 国 数 以 及 属性 值 简 
写 等 一 系列 更 简洁 的 语法 。 此 外 ， 解 构 、 剩 余 参 数 以 及 扩展 运算 符 等 我 们 将 介绍 的 特性 也 
提供 了 更 加 语义 化 的 编程 方式 。 第 2 章 和 第 3 章 将 介绍 ES6 中 的 这 部 分 内 容 。 




















ES6 提供 了 几 种 新 机 制 来 描述 异步 流程 代表 一 个 操作 最 终结 果 的 Promise、 代 表 一 系列 
值 的 和 迭代 器 ， 以 及 能 产生 一 系列 值 的 特殊 运 代 器 一 一 生成 器 。 基 于 这 些 新 概念 和 结构 ， 
ES2017 提供 了 async/await， 让 我 们 可 以 像 编 写 同 步 代 码 那样 编写 异步 代码 。 第 4 章 将 介 
绍 这 里 提 到 的 迭代 及 流 控制 机 制 。 




















在 JavaScript 中 ， 使 用 任意 字符 串 作为 键 的 普通 对 象 来 创建 映射 是 很 常见 的 。 如 果 键 值 
来 自用 户 输 入 ， 且 没有 验证 ， 那 么 极 有 可 能 产生 漏洞 。 为 此 ，ES6 引入 了 一 些 新 的 原生 
内 置 对 象 来 管理 集合 和 映射 ,并且 没 有 只 能 使 用 字符 串 作 为 键 的 限制 。 第 9 章 将 介绍 相 
代理 对 象 用 于 重新 定义 可 以 通过 JavaScript 反射 完成 的 操作 。 代 理 对 象 和 其 他 语 境 中 的 代 
里 类 似 ， 比 如 网 络 路 由 中 所 说 的 代理 。 它 可 以 拦截 JavaScript 对 象 的 任何 交互 ， 比 如 属性 
的 定义 、 删 除 以 及 访问 。 鉴 于 代理 的 工作 机 制 ， 我 们 很 难 用 腻子 脚本 全 面 实现 其 功能 : 当 
然 ， 腻 子 脚 本 是 有 的 ， 只 是 在 某 些 场景 下 其 实现 与 规范 不 符 。 第 6 章 将 介绍 代理 。 



































De 





























除了 新 的 内 置 对 象 ，ES6 还 对 Number 、Math、Array 以 及 String 对 象 进行 了 一 定 的 扩展 。 
第 7 章 将 介绍 添加 在 这 些 内 置 对 象 上 的 一 系列 新 实例 方法 和 静态 方法 。 








ES6 还 为 JavaScript 引入 了 一 个 原生 模块 系统 。 第 8 章 从 Node.js 使 用 的 CommonJS 模块 系 
统 讲 起 ， 然 后 详细 讲解 JavaScript 原生 模块 的 语义 。 











因为 ES6 引入 了 太 多 修改 ， 所 以 很 难 做 到 将 其 新 特性 与 现 有 JavaScript 知识 自然 整合 。 为 
此 ， 第 9 章 将 用 一 整 章 的 篇 幅 来 分 析 每 个 特性 的 优点 和 重要 性 ， 以 便 你 对 ES6 建立 起 初步 
的 概念 ， 并 基于 此 开始 使 用 ES6。 


1.5 JavaScript 的 未 来 

JavaScript 语言 已 经 从 1995 年 一 门 没 喻 名 气 的 语言 发 展 为 今天 这 样 一 门 强大 的 语言 。 虽 然 
ES6 向 前 跨越 了 一 大 步 ， 却 远 远 未 到 终点 。 鉴 于 每 年 都 会 有 新 的 规范 发 布 ， 如 何 跟 上 新 规 
范 发 布 的 步伐 就 很 重要 了 。 
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了 解 1.2 节 中 介绍 的 持续 迭代 流程 后 ， 我 们 知道 ， 要 想 跟 进 标准 ， 首 先 就 要 定期 访问 TC39 
提案 库 “。 我 们 要 时 刻 关注 候选 推荐 提案 〈 即 阶段 3 的 提案 )， 因 为 这 些 提案 最 有 可 能 加 入 
新 规范 。 


用 一 本 书 来 介绍 一 门 快速 发 展 的 语言 是 不 太 可 能 的 。 因 此 ， 关 注 TC39 提案 库 、 订 阅 周 
刊 “、 阅 读 JavaScript 博客 “是 及 时 跟 进 JavaScript 最 新 进展 的 有 效 方式 。 




















撰写 本 书 时 ， 开 发 者 期 待 已 久 的 Async 函数 已 经 加 入 规范 ， 并 在 ES2017 中 发 布 。 此 时 
此 刻 有 很 多 候选 提案 ， 比 如 支持 异步 加 载 原生 JavaScript 模块 的 动态 import()， 以 及 使 用 
ES6 中 针对 参数 列表 和 数组 引入 的 剩余 和 扩展 运算 符 来 枚 举 对 象 属性 。 











虽然 本 书 的 主要 关注 点 是 ES6， 但 我 们 同样 会 学 习 重要 的 候选 推荐 ， 如 刚刚 提 及 的 Async 
函数 、 动 态 import() 调用 、 对 象 剩余 /扩展 ， 以 及 其 他 内 容 。 














注 13: TC39 收录 的 所 有 提案 参见 https://mjavascript.com/out/tc39-proposals。 

注 14: 这 种 电子 周刊 很 多 ， 如 Pony Foo Weekly、Javascript Weekly。 

注 15: Pony Foo 网 站 上 有 很 多 关于 ECMAScript 开发 的 文章 ，Axel Rauschmayer 也 写 了 很 多 关于 这 方面 的 
文章 5 
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第 2 章 


ES6 基 础 














ES6 引入 了 大 量 的 非 破 坏 性 语法 改进 ， 本 章 将 逐一 讨论 其 中 大 部 分 改进 。 其 中 很 多 是 语法 
糖 ， 因 为 使 用 更 复杂 的 ES5 代码 也 能 够 实现 。 当 然 ， 也 有 一 部 分 不 止 是 语法 糖 ， 如 Let 和 
const 这 两 种 完全 不 同 的 变量 声明 方式 ， 本 章 最 后 会 对 其 进行 介绍 。 


























ES6 中 的 对 象 字 面 量 语法 有 一 些 调整 ， 我 们 从 这 部 分 开始 说 起 。 


2.1 ”对象 字面 量 


对 象 字面 量 是 指使 用 { 简写 语法 进行 的 对 象 声 明 ， 有 具体 的 语法 格式 如 下 所 示 。 














var book = { 
title: 'Modular ES6', 
author: 'Nicolas', 
publisher: 'O’Reilly’ 
} 


ES6 对 对 象 字 面 量 语法 进行 了 一 些小 的 改进 : 属性 值 简写 、 可 计算 属性 名 和 方法 定义 。 接 
下 来 我 们 将 探讨 这 些 内 容 及 其 用 法 。 









































2.1.1 属性 值 简写 

有 时 我 们 会 声明 这 样 一 个 对 象 ， 该 对 象 的 属性 名 和 所 引用 的 变量 名 相同 。 假 设 有 一 个 
Listeners 数组 ， 要 想 将 其 赋 给 对 象 字 面 量 中 名 为 Listeners 的 属性 ， 必 须 重复 输入 该 名 
称 。 以 下 代码 中 的 对 象 字 面 量 就 包含 两 个 名 称 与 值 重复 的 属性 。 
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var listeners = [] 

function listen() {} 

var events = { 
listeners: listeners, 
listen: listen 


} 


























在 ES6 中 ， 借 用 新 的 属性 值 简写 语法 可 以 省 略 属性 值 和 冒号 。 属 性 值 简写 会 进行 隐 性 赋 
值 ， 如 下 所 示 。 





var listeners = [] 
function listen() {} 
var events = { listeners, listen } 











随 着 本 章 的 讨论 ， 我 们 会 发 现 属性 值 简写 可 以 在 不 影响 代码 含义 的 情况 下 有 效 减 少 重复 代 
码 。 以 下 代码 重新 实现 了 浏览 器 中 的 持久 存储 API localstorage 的 部 分 内 容 ， 可 以 将 其 看 
作 内 存 中 的 ponyfill 。 如 果 没 有 使 用 简写 语法 ， 那 么 storage 对 象 看 起 来 会 更 加 克 长 。 




















var store = {} 
var storage = { getItem, setItem, clear } 
function getItem(key) { 

return key in store ? store[key] : null 
} 
function setItem(key, value) { 

store[key] = value 


function clear() { 
store = {} 


} 








ES6 中 的 很 多 特性 旨 在 减少 所 维护 代码 的 复杂 性 ， 属 性 值 简写 只 是 其 中 之 一 。 习 惯 这 一 语 
法 后 ， 你 会 发 现代 码 的 可 读 性 和 开发 者 的 生产 效率 都 会 得 到 提升 。 

















2.1.2 ”可 计算 属性 名 


有 时 我 们 可 能 需要 声明 一 个 属性 名 依赖 变量 或 表达 式 的 对 象 ， 如 以 下 的 ES5 代码 所 示 。 在 
这 个 示例 中 ,假设 expertise 是 一 个 函数 参数 ， 且 事先 并 不 知道 它 的 值 。 








var expertise = 'journalism' 
var person = { 

name: "Sharon ' ， 

age: 27 
} 











注 1: 与 polyfll 一 样 ，ponyfill 是 对 尚未 被 所 有 JavaScript 运行 环境 所 支持 的 功能 的 用 户 实现 。polyfill 主要 

试图 修补 运行 环境 ， 从 而 使 某 一 特性 看 起 来 像 原 生 支 持 的 ， 而 ponyfill 是 将 运行 环境 所 缺失 的 功能 实 
现 为 一 个 独立 的 模块 ,并 且 不 会 污染 运行 环境 。 这 样 做 的 好 处 是 不 会 超出 第 三 方 库 对 运行 环境 的 期 望 ， 
为 它们 可 能 并 不 知道 我 们 所 使 用 的 polyfill。 
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person[expertise] = { 
years: 5， 
interests: ['international', 'politics', 'internet'] 


} 
ES6 中 的 对 象 字面 量 不 再 局 限于 使 用 静态 名 称 声明 属性 。 我 们 也 可 以 使 用 可 计算 属性 名 ， 
用 方 括号 包 于 表达 式 ， 并 将 其 作为 属性 名 使 用 。 执 行 声明 时 ， 表 达 式 才 会 被 计算 ， 计 算 结 
果 将 作为 属性 名 使 用 。 以 下 示例 只 用 一 步 就 完成 了 上 例 person 对 象 的 声明 ， 无 须 借助 第 二 
个 声明 来 添加 expertise 属性 。 















































var expertise = 'journaLism' 
var person = { 
name: 'Sharon', 


age: 27， 
[expertise]: { 

years: 5， 

interests: ['international', 'politics', 'internet'] 
} 


} 


属性 值 简写 和 可 计算 属性 名 不 能 同时 使 用 。 属 性 值 简写 是 编译 时 执行 的 简单 语法 糖 ， 可 以 
帮助 避免 重复 ， 可 计算 属性 名 则 是 运行 时 计算 的 。 如 果 试 图 同时 使 用 这 两 个 不 兼容 的 特 
性 ， 那 么 系统 会 抛 出 语法 错误 异常 。 大 多 数 情况 下 ， 这 种 组 合 会 导致 代码 难以 理解 ， 因 此 
最 好 不 要 同时 使 用 它们 。 


























var expertise = 'journaLism' 
var journalism = { 

years: 5， 

interests: ['international', 'politics', 'internet'] 
} 


var person = { 

name: 'Sharon', 

age: 27， 

[expertise] // 语法 错误 
} 


可 计算 属性 名 的 常见 使 用 场景 是 ， 当 我 们 想 要 将 grocery 添加 到 另 一 个 对 象 中 ， 并 且 想 要 
使 用 grocery.id 字段 作为 键 值 时 ， 就 可 以 使 用 可 计算 属性 名 ， 如 下 所 示 。 我 们 可 以 直接 在 
groceries 对 象 字面 量 中 进行 内 联 声明 ， 无 须 额外 使 用 第 三 条 声明 语句 将 grocery 添加 到 


groceries 中 。 


























var grocery = { 
id: 'bananas', 
name: 'Bananas', 
units: 6， 
price: 10， 
currency: 'USD' 
} 


var groceries = { 





大 
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[grocery.id]: grocery 


另 一 种 使 用 场景 是 ， 一 个 国 数 接受 一 个 参数 ， 然 后 用 该 参数 构建 对 象 。 如 果 使 用 ES5， 则 
需要 分 配 一 个 变量 来 声明 对 象 字面 量 ， 然 后 添加 一 个 动态 属性 ， 最 后 返回 这 个 对 象 。 以 下 
示例 展示 了 这 一 使 用 场景 ， 








创建 了 一 个 能 够 用 于 Ajax 消息 的 envelope， 这 些 消息 遵循 以 下 








约定 : 具有 一 个 描述 发 生 的 错误 的 error 属性 ， 以 及 一 个 表示 成 功 的 success 属性 。 


function getEnvelope(type, description) { 


var envelope = { 
data: {} 


enveLope[type] = description 


return envelope 


} 





可 计算 属性 名 只 需要 一 条 语句 即 可 实现 以 上 函数 。 


function getEnvelope(type, description) { 


return { 
data: {}, 


[type]: description 


} 


接 下 来 我 们 要 介绍 的 有 关 对 象 字面 量 的 改进 是 关于 方法 的 。 


2.1.3 方法 定义 


通常 来 说 ， 我 们 可 以 通过 添加 属性 为 对 象 声 明 方法 。 以 下 代码 创建 了 一 个 能 够 支持 多 种 事 











件 类 型 的 小 型 事件 分 发 器 。emitter#on 方法 可 以 用 于 注册 事件 监听 函数 ，emitter#emit 方 








法 可 以 用 于 分 发 事件 。 


var emitter = { 
events: {}, 


on: function (type, fn) { 
if (this.events[type] === undefined) { 
this.events[type] = [] 


} 


this.events[type] .push(fn) 


}, 


emit: function (type, event) { 
if (this.events[type] === undefined) { 


return 


this.events[type].forEach(function (fn) { 


fn(event) 
}) 
} 
} 
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从 ES6 开始 ， 可 以 在 对 象 字面 量 中 使 用 新 的 方法 定义 语法 进行 方法 声明 ， 省 略 冒 号 和 
function 关键 字 。 与 使 用 function 关键 字 的 传统 声明 方式 相 比 ， 这 样 更 加 简洁 。 以 下 示例 
展示 了 使 用 方法 定义 时 的 emitter 对 象 ， 如 下 所 示 。 











var emitter = { 
events: {}, 
on(type, fn) { 
if (this.events[type] === undefined) { 
this.events[type] = [] 
} 
this.events[type].push(fn) 
}， 
emit(type, event) { 
if (this.events[type] === undefined) { 
return 


this.events[type].forEach(function (fn) { 
fn(event) 
}) 
} 
} 


箭头 函数 是 ES6 中 的 另 一 种 函数 声明 方式 ， 它 有 好 几 种 形式 。 接 下 来 我 们 探究 一 下 箭头 函 
数 到 底 是 什么 、 如 何 声明 ， 并 探讨 其 语法 形式 。 

入 和 刀 、 二 米 
2.2 箭头 函数 


在 JavaScript 中 ， 我 们 通常 使 用 如 下 代码 进行 函数 声明 ， 其 中 包括 函数 名 、 参 数列 表 和 函 
数 体 。 

















function name(parameters) { 
// 函数 体 
} 
我 们 也 可 以 创建 匿名 函数 ， 省 略 函 数 的 名 称 ， 将 其 赋 给 一 个 变量 或 对 象 的 属性 ， 又 或 者 直 
接 调用 。 











var example = function (parameters) { 


i // 函数 体 


从 ES6 开始 ， 可 以 将 箭头 函数 作为 声明 匿名 国 数 的 另 一 种 方式 。 需 要 注意 的 是 ， 箭 头 国 数 
有 几 种 不 同 的 写法 。 以 下 代码 中 的 箭头 函数 和 前 面 所 见 的 匿名 函数 非常 相似 。 不 同 之 处 在 
于 缺少 了 function 关键 字 ， 并 且 参 数列 表 的 右 侧 多 了 一 个 箭头 =>。 























var example = (parameters) => { 


// 函数 体 
} 
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虽然 箭头 国 数 看 起 来 和 常规 的 匿名 函数 很 相似 ， 但 它们 本 质 上 完全 不 同 : 箭头 函数 不 能 显 
式 地 命名 ， 尽 管 现代 运行 环境 会 将 箭头 函数 所 赋予 的 变量 名 作为 国 数 名 ， 箭 头 函 数 不 能 
作 构 造 国 数 ， 也 没有 prototype 属性 ， 这 意味 着 不 能 对 它们 使 用 new 关键 字 ， 此 外 ， 箭 头 
函数 会 绑 定 到 所 在 词法 作用 域 中 ， 因 此 它们 不 会 改变 this 的 指向 。 











接 下 来 我 们 将 深入 了 解 它 们 在 语义 上 与 传统 国 数 的 区 别 、 声 明 箭头 函数 的 多 种 方法 以 及 实 
际 用 例 。 


2.2.1 词法 作用 域 

由 于 箭头 函数 不 会 创建 新 的 作用 域 ， 在 箭头 国 数 的 国 数 体 内 ，this、arguments 以 及 super 
均 属于 所 在 的 父 级 作用 域 。 思 考 以 下 示例 ， 其 中 有 一 个 tiner 计时 器 对 象 ， 对 象 上 有 一 个 
seconds 计数 器 属性 和 一 个 start 方法 ， 该 方法 就 是 用 前 面 所 讨论 的 方法 定义 语法 创建 的 。 
然后 我 们 开启 这 个 计时 器 并 等 待 几 秒 ， 接 着 会 打印 已 经 过 去 的 秒 数 。 

















var timer = { 
seconds: 0， 
start() { 
setInterval(() => { 
this.seconds++ 
}, 1000) 
} 
} 
timer .start() 
setTimeout(function () { 
consoLe.Log(timer .seconds) 
}, 3500) 
// <- 3 


如 有 果 不 使 用 箭头 函数 ， 而 是 使 用 常规 的 匿名 函数 定义 传人 setInterval 的 函数 ， 那 么 this 
将 绑 定 到 匿名 函数 的 上 下 文 ， 而 不 是 start 方法 的 上 下 文 。 此 时 ， 如 有 果 想 要 实现 前 面 的 
timer 计时 器 ， 需 要 在 start 方法 的 开头 加 上 var self = this 这 样 的 声明 语句 ， 然 后 在 
setInterval 函数 内 部 引用 self。 由 此 可 见 ， 使 用 箭头 函数 能 够 避免 为 保持 上 下 文 引用 而 
额外 增加 的 复杂 性 ， 只 关注 代码 的 功能 即 可 。 











同样 ，ES6 箭头 函数 的 作用 域 绑 定 也 意味 着 使 用 .call、.apply、.bind 等 方法 调用 函数 时 
也 无 法 改变 this 的 指向 。 这 一 限制 通常 是 很 有 用 的 ， 确 保 了 上 下 文 不 会 被 修改 。 





再 来 看 看 以 下 示例 。 你 认为 consote.tog 会 输出 什么 呢 ? 


function puzzle() { 
return function () { 
console.log(arguments) 
} 
} 
puzzle('a', 'b', 'c')(1, 2, 3) 
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答案 是 1，2，3。 因 为 arguments 属于 匿名 函数 的 上 下 文 ， 所 以 传 入 匿名 函数 的 参数 会 被 
输出 。 
如 果 将 上 例 中 的 匿名 函数 换 为 第 头 函 数 ， 结 果 又 会 怎样 呢 ? 


function puzzle() { 
return () => console.log(arguments) 


puzzle('a', 'b', 'c')(1, 2, 3) 
在 该 示例 中 ，arguments 对 象 属于 puzzle 国 数 的 上 下 文 ， 因 为 箭头 国 数 并 不 会 创建 闭 包 。 
因此 ， 输 出 结果 为 'a'，'b'，'c'。 
前 面 提 过 箭头 函数 有 多 种 写法 ， 但 到 目前 为 止 ， 我 们 只 使 用 了 完整 版 的 写法 。 其 他 几 种 写 
法 是 什么 样 的 呢 ? 


2.2.2 ”箭头 函数 的 写法 
我 们 来 回顾 一 下 目前 所 学 的 箭头 函数 语法 。 
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var example = (parameters) => { 
// 函数 体 
} 
如 果 稍 头 国 数 只 有 一 个 参数 ， 那 么 可 以 省 略 圆 括号 。 当 然 ， 这 是 可 选 的 。 将 箭头 国 数 传人 
其 他 方法 时 ， 这 么 做 很 有 用 ， 因 为 这 样 能 够 减少 圆 括号 的 数量 ， 使 得 代码 更 简洁 。 























var double = value => { 
return value * 2 


} 


使 用 箭头 函数 声明 简单 函数 时 ， 完 整 写法 较为 烦琐 ， 如 前 面 的 double 方法 。 箭 头 函 数 的 以 
下 写法 省 略 了 函数 体 ， 使 用 value * 2 表达 式 代替 了 整个 函数 体 。 当 函数 被 调用 时 ， 表 达 
式 会 进行 计算 ,结果 会 作为 返回 值 返回 。 此 时 return 语句 是 隐 式 的 ， 并 且 不 需要 使 用 花 括 
号 包 库 函数 体 ， 只 用 一 个 表达 式 就 行 了 。 




















var double = (vaLue) => value * 2 








注意 ， 还 可 以 同时 使 用 隐 式 括号 和 隐 式 返回 值 ， 这 样 第 头 函数 会 更 加 简洁 。 








var double = value => value * 2 








隐 式 返回 对 象 字面 量 
要 想 隐 式 返回 对 象 字面 量 ， 需 要 使 用 加 括号 将 对 象 字 面 量 包 衷 起来。 否则， 编译 
将 花 括 号 当 作 函 数 体 的 开始 和 结束 标志 。 


var objectFactory = () => ({ modular: 'es6' }) 


4 


射 得 到 的 值 均 为 undefined。 


[1，2，3].map(vaLue => { number: value }) 
// <- [undefined, undefined, undefined] 


出 SyntaxError 异常 。 


[1, 2, 3] .map(value => { number: value, verified: true }) 
// <- SyntaxError 


在 对 象 字面 量 外 添加 圆 括号 即 可 解决 该 问题 ， 这 样 编译 器 不 会 再 将 其 当 作 邮 数 体 ， 上 出 
时 的 对 象 声 明 表达 式 即 为 我 们 想 要 隐 式 返回 的 对 象 字 面 量 。 


[1，2，3].map(vaLue => ({ number: value, verified: true })) 


/* <- [ 


会 


在 以 下 示例 中 ，JavaScript 就 将 花 括 号 当成 了 和 葡 头 函数 的 函数 体 。 此 外 ，number 会 被 当 
作 一 个 label ，value 表达 式 则 没有 任何 作用 。 因 为 函数 体 没 有 返回 任何 内 容 ， 所 以 映 


如 果 隐 式 返回 的 对 象 字 面 量具 有 多 个 属性 ， 则 编译 器 无 法 识别 第 二 个 属性 ， 因 此 会 抛 


t 


{ number: 
{ number: 
{ number: 


1, verified: true }, 
2, verified: true }, 
3, verified: true }] 


*/ 























现在 你 应 该 已 经 理解 什么 是 第 头 函 数 ， 接 下 来 我 们 下 





2.2.3 ”优点 和 用 例 





了 看 看 篆 头 函数 的 优点 以 及 正确 的 用 法 。 


一 般 来 说 ， 我 们 不 应 该 盲目 地 使 用 ES6 的 特性 。 相 反 ， 最 好 在 使 用 每 个 特性 前 仔细 思 
一 下 ， 使 用 新 特性 能 否 真 的 提高 代码 的 可 读 性 和 可 维护 性 。ES6 特性 并 不 总 是 比 现 有 特性 








好 ， 最 好 不 要 随意 使 用 它们 。 





箭头 函数 并 不 适用 于 某 些 情 况 。 比 如 ， 当 一 个 国 数 包含 很 多 行 代码 时 ， 使 用 箭头 函数 并 





不 





能 对 代码 起 到 改进 作用 。 箭 头 函 数 更 适合 简短 实例 ， 其 中 function 关键 字 和 语法 模板 占 函 


数 表 达 式 的 很 大 一 部 分 。 
为 函数 适当 命名 能 使 人 更 容易 理解 其 含义 。 








主 2: label 用 了 
所 要 跳 ! 





FF 定义 指令 。 它 可 以 用 于 goto 语句 ， 以 指明 需要 跳 转 的 指令 ， 
的 序列 ， 还 可 以 用 于 continue 语句 ， 表 示 想 要 执行 的 序列 。 





也 可 以 用 在 











E break 语句 中 表示 
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其 他 变量 隐 式 地 命名 。 在 以 下 示例 中 ， 我 们 将 箭头 函数 赋 给 了 throwError 变量 。 当 调用 该 
国 数 的 过 程 中 发 生 错 误 时 ， 调 用 栈 能 够 正确 地 定位 到 throwError。 











o 


var throwError = message => { 
throw new Error(message) 

} 

throwError('this is a warning') 

<- Uncaught Error: this is a warning 
at throwError 





当 需 要 定义 任何 情况 下 词法 作用 域 都 不 改变 的 匿名 国 数 时 ， 箭 头 函 数 很 适合 ， 并 且 在 其 些 
情况 下 ， 它 还 可 以 使 代码 更 加 整洁 。 在 大 多 数 函 数 式 编程 的 情况 下 ， 箭 头 函 数 也 特别 有 
用 ， 如 使 用 数组 对 象 的 .nap、.filter 或 者 .reduce 方法 时 ， 有 具体 示例 如 下 所 示 。 














[1，2，3，4] 
.map(valuye => value * 2) 
.filter(value => value > 2) 
.forEach(vaLue => console.log(value)) 

// <- 4 

// <- 6 

// <- 8 


2.3 解构 


解构 是 ES6 中 最 灵活 且 最 有 表现 力 的 特性 之 一 。 同 时 ， 它 也 最 为 简单 。 它 可 以 将 对 象 的 属 
性 值 绑 定 到 任意 数量 的 变量 。 解 构 可 以 用 于 对 象 、 数 组 以 及 函数 参数 列表 。 我 们 从 对 象 的 
解构 开始 逐一 介绍 。 


2.3.1 ”对象 的 解构 
假设 我 们 有 一 个 程序 ， 其 中 有 一 些 漫画 角色 ，Bruce Wayne 是 这 些 角色 中 的 一 个 ， 我 们 想 
要 引用 描述 Bruce Wayne 的 对 象 中 的 属性 。 以 下 是 描述 蝙蝠 侠 (Batman) 的 示例 对 象 。 





























var character = { 
name: 'Bruce', 
pseudonym: 'Batman', 
metadata: { 
age: 34， 
gender: 'male' 
}s 
batarang: ['gas pellet', 'bat-mobile control', 'bat-cuffs'] 


} 




















如 果 想 要 声明 一 个 pseudonym 变量 并 引用 character.pseudonym 的 值 ， 我 们 可 能 会 写 出 如 下 的 
ES5 代码 。 如 果 需 要 在 多 个 地 方 引 用 pseudonym， 你 肯定 希望 避免 多 次 输入 character .pseudonym。 



































var pseudonym = character .pseudonym 





入 后 
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如 果 在 赋值 中 使 用 解构 ， 上 述 示例 的 语法 会 变 得 更 加 清晰 。 正 如 你 将 看 到 的 ， 使 用 解构 由 
值 时 ， 不 需要 重复 输入 两 次 pseudonym 仍 可 以 清晰 表达 含义 。 以 下 语句 等 价 于 前 面 的 ES5 
代码 。 





var { pseudonym } = character 
通过 var 声明 时 ， 使 用 逗号 分 隔 能 一 次 声明 多 个 变量 。 同 样 ， 在 解构 表达 式 的 花 括号 中 也 
可 以 同时 声明 多 个 变量 。 

var { pseudonym, name } = character 
同样 ， 我 们 可 以 在 同一 个 var 语句 中 同时 使 用 常规 的 变量 声明 和 解构。 这 种 用 法 一 开始 看 
起 来 可 能 会 很 奇怪 ， 而 且 还 要 看 所 使 用 的 JavaScript 代码 样式 规范 是 否 允 许 在 单个 语句 中 
声明 多 个 变量 。 无 论 如 何 ， 我 们 还 是 可 以 从 这 一 点 看 出 解构 语法 的 灵活 性 。 








var { pseudonym } = character, two = 2 


如 果 想 要 提取 pseudonyn 属性 ， 并 将 其 声明 为 aLias 变量 ， 那 么 可 以 使 用 以 下 这 种 称 为 别 
名 的 解构 语法 。 除 了 alLias， 还 可 以 使 用 任何 其 他 合法 的 变量 























var { pseudonym: alias } = character 
console.log(alias) 
// <- 'Batman’' 


别名 语法 看 起 来 似乎 并 不 比 ES5 写法 简单 (alias = character.pseudonym)。 但 解构 支持 
深度 结构 ， 这 就 很 有 用 了 ， 如 下 所 示 。 





var { metadata: { gender } } = character 


类 似 以 上 这 种 情况 ， 当 需要 解构 一 个 侯 套 较 深 的 属性 值 时 ， 使 用 别名 能 够 更 清晰 地 表达 所 
有 人 解构 的 属性 名 。 试 想 一 下 ，gender 并 不 能 像 characterGender 一 样 清晰 表达 所 指 的 内 容 。 








var { metadata: { gender: characterGender } } = character 





上 述 这 种 情况 很 常见 ， 因 为 属性 通常 都 是 基于 其 宿主 对 象 命名 的 。character .metadata. 
gender 的 含义 很 清楚 ， 而 单独 使 用 gender 则 可 以 表示 很 多 内 容 ， 因 此 在 解构 赋值 中 使 用 
characterGender 这 样 的 别名 能 够 将 上 下 文 含义 带 入 变量 























在 ES5 中 访问 一 个 不 存在 的 属性 时 会 返回 undefined。 





console.log(character .boots) 

// <- undefined 
console.log(character[ 'boots']) 
// <- undefined 


解构 中 同样 如 此 。 当 进行 解构 的 属性 不 存在 时 ， 声 明 的 解构 变量 也 会 得 到 undefined。 
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var { boots } = character 
console. log(boots) 
// <- undefined 


通常 情况 下 ， 访 问 null 或 undefined 的 属性 会 报错 。 与 此 类 似 ， 当 解构 声明 中 藤 套 属性 的 
父 对 象 是 null 或 undefined 时 ， 也 会 抛 出 异常 。 





var { boots: { size } } = character 
// <- Exception 

var { missing } = null 

// <- Exception 


由 于 解构 主要 是 语法 糖 ， 查 看 以 下 的 ES5 等 价 代码 就 能 够 清楚 地 知道 为 何 上 述 代 码 会 抛 出 
异常 。 
var nothing = null 


var missing = nothing.missing 
// <- Exception 





在 解构 中 ， 我 们 可 以 为 这 些 值 为 undefined 的 属性 解构 提供 默认 值 。 默 认 值 可 以 是 任何 类 
型 : 数值 、 字 符 串 、 函 数 、 对 象 ， 或 者 对 其 他 变量 的 引用 等 。 























var { boots = { size: 10 } } = character 
console. log(boots) 
// <- { size: 10 } 


默认 值 也 适用 于 和 骨 套 属性 解构 。 
var { metadata: { enemy = 'Satan' } } = character 


console. log(enemy) 
// <- 'Satan' 


当 与 别名 结合 使 用 时 ， 应 该 将 别名 放 在 前 面 ， 默认 值 放 在 后 面 ， 如 下 所 示 。 
var { boots: footwear = { size: 10 } } = character 
我 们 可 以 在 解构 模式 中 使 用 可 计算 属性 名 语法 。 不 过 ， 这 种 情况 下 必须 提供 一 个 别名 作为 


变量 名 。 因 为 可 计算 属性 名 中 允许 使 用 任意 表达 式 ， 所 以 编译 器 无 法 推断 出 变量 的 名 称 。 
以 下 示例 使 用 别名 characterBoots 和 可 计算 属性 从 character 对 象 中 提取 了 boots 属性 。 























var { ['boo' + 'ts']: characterBoots } = character 
console.log(characterBoots) 
// <- true 


这 一 写法 并 没有 太 大 用 处 ， 因 为 characterBoots = character[boots] 比 { [boots]: 
characterBoots } = character 更 简单 ， 也 更 符合 表达 习惯 。 也 就 是 说 ， 可 计算 属性 名 在 
声明 对 象 字面 量 的 属性 名 时 很 有 用 ， 但 在 解构 赋值 中 恰恰 相反 。 


以 上 就 是 对 象 解构 的 相关 内 容 。 数 组 的 解构 又 是 怎样 的 呢 ? 
































入 各 


24 | 第 2 章 


2.3.2 ”数组 的 解构 

数组 的 解构 语法 和 对 象 解构 类 似 。 以 下 示例 展示 了 如 何 将 coordinates 数组 解构 成 x 和 y 
两 个 变量 。 可 以 看 到 ， 这 里 使 用 了 方 括号 ， 而 不 是 花 括 号 ， 这 就 表示 我 们 在 使 用 数组 解 
构 ， 而 不 是 对 象 解构 。 解 构 允 许 我 们 在 不 显 式 引用 索引 的 情况 下 清晰 地 为 数组 中 的 值 命 
名 ， 即 不 需要 使 用 x = coordinates[9] 这 样 的 代码 。 











var coordinates = [12, -7] 
var [x, y] = coordinates 
console.log(x) 

// <- 12 


解构 数组 时 可 以 跳 过 不 感 兴趣 或 不 需要 引用 的 值 。 
var names = ['James', 'L.', 'Howlett'] 
var [ firstName, , lastName ] = names 


console.log(lastName) 
// <- 'Howlett' 


与 对 象 解构 类 似 ， 数 组 解构 也 可 以 设 定 默认 值 。 


var names = ['James', 'L.'] 


var [ firstName = 'John', , lastName = 'Doe' ] = names 
console.log(lastName) 
// <- 'Doe' 

















TI 


在 ES5 中 ， 当 需要 交换 两 个 变量 的 值 时 ， 通 常 需要 借助 第 三 个 临时 变量 。 如 下 所 示 。 














var Left = 5 
var right = 7 
var aux = left 
left = right 
right = aux 








解构 可 以 帮助 我 们 避免 声明 aux 变量 ， 专 注 于 原本 的 意图 。 再 次 强调 ， 解 构 能 够 使 我 们 的 
表达 更 加 清晰 有 效 。 














var Left = 5 
var right = 7 
[left, right] = [right, left] 


接 下 来 我 们 将 讨论 有 关 解 构 的 最 后 一 项 内 容 ， 即 函数 的 参数 。 


2.3.3 函数 参数 的 默认 值 
ES6 中 的 函数 参数 也 能 够 指定 默认 值 。 以 下 示例 中 的 exponent 参数 定义 了 一 个 最 常用 的 默 
认 值 。 
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function powerOf(base, exponent = 2) { 
return Math.pow(base, exponent) 


} 


第 头 函 数 的 参数 也 可 以 指定 默认 值 。 当 为 第 头 函 数 的 参数 指定 默认 值 时 ， 哪 怕 只 有 一 个 参 
数 ， 也 需要 用 圆 括号 将 参数 列表 包 右 起 来 。 

















var double = (input = 0) => input * 2 





与 某 些 编程 语言 不 同 ， 我 们 可 以 为 任何 一 个 参数 设置 默认 值 ， 而 不 是 只 能 给 最 后 一 个 参数 
设置 。 





function sumOf(a = 1, b=2,c=3)f{ 
return a + b + C 


console.log(sumOf(undefined, undefined, 4)) 
//<-1+2+4=7 


在 JavaScript 中 ， 向 函数 传递 包含 多 个 属性 的 options 对 象 参数 是 再 常见 不 过 的 。 如 果 调 
用 函数 时 没有 传 信 ， 可 以 为 其 设 定 一 个 默认 值 对 象 options， 如 下 所 示 。 














var defaultOptions = { brand: 'Volkswagen', make: 1999 } 
function carFactory(options = defaultOptions) { 

console. log(options.brand) 

console. log(options .make) 


} 

carFactory() 

// <- 'Volkswagen' 
// <- 1999 


该 方法 存在 一 个 问题 ， 如 果 carFactory 的 使 用 者 传人 一 个 options 对 象 ， 则 所 有 的 默认 值 
都 会 失效 。 
CarFactory({ make: 2000 }) 


// <- Undefined 
// <- 2000 


结合 使 用 函数 参数 的 默认 值 和 解构 能 够 解决 这 个 问题 。 


2.3.4 函数 参数 的 解构 
与 只 提供 一 个 默认 值 相 比 ， 更 好 的 方法 是 解构 整个 options， 并 在 解构 模式 中 为 每 个 属性 
指定 默认 值 。 通 过 使 用 这 个 方法 ， 我 们 不 通过 options 对 象 就 能 引用 options 中 的 每 个 选 
项 ， 但 也 因此 不 再 能 够 直接 引用 options， 这 在 某 些 情况 下 可 能 会 产生 问题 。 
function carFactory({ brand = 'Volkswagen', make = 1999 }) { 
console. log(brand) 


console. log(make) 


} 



































大 
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carFactory({ make: 2000 }) 
// <- 'Volkswagen' 
// <- 2000 





在 这 种 情况 下 ， 如 果 使 用 者 没有 传 入 options 对 象 ， 则 默认 值 会 再 次 缺失 。 也 就 是 说 ， 如 
有 果 没 有 传人 options 对 象 参 数 ，carFactory 就 会 报错 。 为 options 添加 一 个 空 对 象 作为 默 
认 值 即 可 避免 该 问题 ， 如 下 所 示 。 这 是 因为 解构 空 对 象 时 已 经 提供 了 默认 值 。 


function carFactory({ 


brand = 'Volkswagen', 
make = 1999 
}= {1{ 


console.log(brand) 
console. log(make) 


carFactory() 
// <- 'Volkswagen' 
// <- 1999 


除了 默认 值 ， 我 们 还 可 以 在 函数 参数 中 使 用 解构 来 描述 函数 能 够 处 理 的 对 象 结构 。 思 考 以 


下 人 代码， 假设 有 一 个 包含 多 个 属性 的 car 对 象 。car 对 象 描述 了 其 拥有 者 、 类 型 、 品 牌 、 
制造 时 间 以 及 拥有 者 购买 时 的 偏好 。 














var car = { 
owner: { 
id: 'e2c3503a4181968c'， 
name: 'Donald Draper' 


}， 

brand: 'Peugeot ' ， 
make: 2015 ， 
modeL: '208', 


preferences: { 
airbags: true， 
airconditioning: false, 
color: 'red' 
} 
} 


如 果 只 想 在 某 个 函数 中 提取 对 象 的 某 些 属性 作为 参数 ， 可 以 通过 解构 提前 显 式 地 引用 这 些 
属性 。 这 样 做 的 好 处 是 ， 看 到 函数 声明 时 ， 就 能 知道 冰 数 需要 使 用 哪些 属性 。 











提前 解构 所 需要 的 每 个 属性 时 ， 当 输入 不 正确 时 ， 就 很 容易 被 发 现 。 以 下 示例 展示 了 如 何 
在 参数 列表 中 指定 需要 的 所 有 属性 ， 这 样 我 们 对 getCarProductModeL API 能 够 处 理 的 参数 
就 一 目 了 然 了 。 
































var getCarProductModel = ({ brand, make, model }) => ({ 
sku: brand + ':' + make + ':' + model, 
brand, 
make, 
model 
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}) 
getCarProductModel(car) 


除了 设置 默认 值 和 填充 options 对 象 ， 解 构 还 有 很 多 其 他 用 处 。 接 下 来 我 们 一 起 来 看 看 。 


2.3.5 ”解构 的 用 例 

当 函 数 返 回 一 个 对 象 或 数组 时 ， 解 构 能 够 更 简洁 地 处 理 返 回 值 。 当 函数 返回 一 个 包含 一 些 
坐标 的 对 象 ， 而 我 们 只 对 其 中 的 x 和 y 感 兴趣 时 ， 可 以 避免 借助 中 间 变 量 point， 这 并 不 
会 影响 代码 的 可 读 性 ， 如 下 所 示 。 























上 








function getCoordinates() { 
return { x: 10, y: 22, z: -1, type: '3d' } 


var { x, y } = getCoordinates() 





默认 值 的 使 用 能 够 避免 重复 。 假 设 存 在 一 个 randon 函数 ， 它 会 生成 一 个 值 在 min 和 max 之 

间 的 随机 整数 ， 默 认 生 成 1~10 的 值 。 人 类 型 语言 中 使 用 命名 参数 的 实 

使 用 解构 更 有 意思 。 这 种 模式 能 够 为 选项 值 定义 默认 值 ， 并 允许 使 用 者 分 别 
盖 ， 使 用 起 来 非常 灵活 。 


function random({ min = 1, max = 10 }= {0}){ 
return Math.floor(Math.random() * (max - min)) + min 






































console.log(random( )) 

// <- 7 

console.log(random({ max: 24 })) 
// <- 18 


解构 也 非常 适用 于 正则 表达 式 。 解 构 使 我 们 能 够 在 不 使 用 索引 值 的 情况 下 命名 匹配 结果 数 
组 中 的 数据 。 以 下 示例 通过 正则 表达 式 解 析 一 个 简单 的 日 期 ， 并 使 用 解构 将 解析 出 来 的 值 
分 别 赋 给 对 应 的 日 期 组 成 部 分 。 匹 配 结果 数组 的 第 一 个 元 素 是 原始 输入 ， 直 接 丢 弃 即 可 。 
function splitDate(date) { 
var rdate = /(\d+).(\d+).(\d+)/ 


return rdate.exec(date) 


} 
var [ , year, month, day] = splitDate('2015-11-06') 

















需要 注意 正则 表达 式 未 匹配 的 情况 ， 此 时 匹配 结果 为 nutL。 因 此 ， 最 好 在 解构 前 进行 错误 
处 理 ， 如 下 所 示 。 


var matches = splitDate('2015-11-06') 
if (matches === null) { 
return 


} 


var [, year, month, day] = matches 











接 下 来 我 们 关注 一 下 扩展 运算 符 和 剩余 参数 。 





2.4 剩余 参数 和 扩展 运算 符 


在 ES6 之 前 ， 处 理 任 意 数量 的 函数 参数 必须 借助 arguments。arguments 不 是 一 个 数组 ， 但 
具有 Length 属性 。 通 常 来 说 ， 我 们 会 使 用 Array#slice.call 方法 将 arguments 对 象 转换 为 
真正 的 数组 ， 如 下 所 示 。 


























function join() { 
var list = Array.prototype.slice.call(arguments) 
return list.join(', ') 

} 

join('first', 'second', 'third') 

// <- 'first, second, third' 


ES6 引入 了 剩余 参数 来 更 好 地 解决 这 一 问题 。 


2.4.1 剩余 参数 

在 函数 的 最 后 一 个 参数 前 添加 ... 可 以 将 该 参数 转变 为 一 个 特殊 的 “剩余 参数 ”。 当 剩余 
参数 是 函数 中 的 唯一 参数 时 ， 它 会 获取 所 有 传 入 函数 的 参数 。 这 与 上 述 使 用 .slice 处 理 的 
结果 相同 ， 但 不 需要 依赖 于 arguments， 直 接 在 参数 列表 中 指定 即 可 。 





























function join(...list) { 
return list.join(', ') 
} 
join('first', 'second', 'third') 
// <- 'first, second, third' 


剩余 参数 前 面 的 参数 不 会 包含 在 List 参数 中 。 


function join(separator, ...list) { 
return list.join(separator) 

} 

join('; ', 'first', 'second', 'third') 

// <- 'first; second; third' 





注意 ， 如 果 箭 头 函数 中 包含 剩余 参数 ， 哪 怕 只 有 一 个 参数 ， 也 必须 放置 在 圆 括 号 内 ， 否 则 
会 抛 出 SyntaxError 异常 。 由 下 例 可 以 看 出 ， 结 合 第 头 函 数 和 剩余 参数 能 够 写 出 更 简洁 的 
函数 式 表 达 式 。 





var sumAll = (...numbers) => numbers.reduce( 
(total, next) => total + next 


) 
console.log(sumAll(1, 2, 5)) 


// <- 8 


可 以 看 出 ， 与 以 上 代码 相 比 ， 使 用 ES5 实现 相同 的 函数 明显 要 更 复杂 。 虽 然 以 上 实现 方式 
较为 简洁 ， 但 这 样 的 sumAll 函数 会 令 没 有 使 用 过 .reduce 方法 的 使 用 者 产生 困扰 ， 而 且 同 
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时 使 用 两 个 箭头 函数 也 会 带 来 一 定 困 扰 。 本 书 第 二 部 分 将 探讨 如 何 权衡 这 种 情况 。 





function sumAll() { 
var numbers = Array.prototype.slice.call(arguments) 
return numbers.reduce(function (total, next) { 
return total + next 


]) 


console.log(sumAll(1, 2, 5)) 
// <- 8 


接 下 来 我 们 讨论 扩展 运算 符 。 它 也 会 用 到 .…， 但 目的 不 同 。 


2.4.2 ”扩展 运算 符 
扩展 运算 符 可 以 将 可 遍历 对 象 转换 为 数组 ， 能 够 在 数组 或 函数 调用 中 轻松 展开 表达 式 。 以 
下 示例 使 用 .. .arguments 将 函数 参数 转换 为 一 个 数组 字面 量 。 








function cast() { 
return [...arguments] 


} 
cast('a', 'b', 'c') 


1/ <- [L'a', 'b', 'c'] 
扩展 运算 符 可 以 将 一 个 字符 串 分 割 成 数组 ， 数 组 中 的 元 素 为 组 成 字符 串 的 每 个 字符 。 





[...'show me'] 
// ln [Ss 'h', '0'，, 'W', 1 1 "m' ， 'e'] 


还 可 以 在 扩展 运算 符 的 左右 添加 其 他 内 容 ， 结 果 和 所 期 待 的 一 样 。 





function cast() { 
return ['left', ...arguments, 'right'] 
} 
cast('a', 'b', 'c') 
// <- ['left', 'a', 'b', 'c', 'right'] 








扩展 运算 符 非常 适合 用 于 拼接 多 个 数组 。 以 下 示例 展示 了 如 何在 数组 字面 量 中 展开 任意 数 
组 ， 其 中 的 元 素 会 添加 到 相应 位 置 。 














var all = [1, ...[2, 3], 4, ...[5], 6, 7] 
console.1log(all) 
// < Es 2， 3， 4， 55 6， 7] 


值得 一 提 的 是 ， 扩 展 运 算 符 不 仅 能 用 于 数组 和 arguments， 还 可 以 用 于 任何 可 遍历 对 象 。 


可 遍历 是 ES6 新 引入 的 一 种 机 制 ， 它 允许 我 们 将 对 象 转换 成 可 遍历 的 内 容 ， 第 4 章 将 深入 
探讨 这 一 机 制 。 











shift 操作 和 扩展 运算 

想 要 从 一 个 数组 的 开头 处 获取 一 个 或 两 个 元 素 时 ， 通 常会 使 用 .shift 方法 。 虽 然 以 下 
代码 实现 了 这 一 功能 ， 却 不 太 容 易 理 解 ， 因 为 代码 使 用 了 两 次 .shift 方法 ， 且 每 次 从 
数组 开头 获取 的 是 不 同 的 值 。 与 ES6 之 前 的 情况 很 类 似 ， 侧 重点 在 于 如 何 让 代码 达到 
我 们 想 要 的 目的 。 

var list = ['a', 'b', 'c', 'd', 'e'] 

var first = list.shift() 

var second = list.shift() 


console.log(first) 


// <- 'a 


在 ES6 中 ， 数 组 的 解构 和 扩展 运算 符 可 以 结合 使 用 。 以 下 代码 和 前 面 的 代码 很 相似 ， 
但 我 们 仅 用 一 身 代 码 即 可 实现 ,而 且 比 重复 使 用 List.shift 方法 表达 得 更 清晰 。 


var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e'] 
console.log(other) 


// <- ['c', 'd', 'e'] 


通过 使 用 扩展 运算 符 ， 我们 可 以 只 关注 需要 实现 的 功能 ， 而 不 用 关心 语言 本 身 。ES6 
的 很 多 新 特性 都 能 够 提高 代码 的 表达 力 ， 并 减少 语言 限制 方面 的 时 间 花 营 。 














在 ES6 之 前 ， 当 某 个 函数 调用 的 参数 是 动态 的 参数 列表 时 ， 通 常会 使 用 .apply 方法 。 这 
么 做 并 不 优雅 ， 因 为 .apply 要 接受 一 个 作为 this 的 上 下 文 参数 ， 但 我 们 又 不 想 自己 来 传 
递 它 。 





fn.apply(null, ['a', 'b', 'c']) 











除了 在 数组 中 使 用 ， 扩 展 运算 符 还 可 以 在 函数 调用 中 使 用 。 以 下 示例 展示 了 如 何 使 用 扩展 
运算 符 向 multiply 函数 传递 任意 数值 作为 参数 。 








function multiply(left, right) { 
return left * right 


} 

var resuLt = multiply(...[2, 3]) 

console.log(result) 

// <- 6 
与 前 面 的 数组 字面 量 相 同 ， 在 函数 调用 中 扩展 参数 可 以 和 常规 参数 一 起 使 用 。 必 要 时 可 以 
使 用 任意 数量 的 扩展 参数 。 以 下 示例 调用 了 print 方法 ， 并 传人 了 一 对 常规 参数 和 一 对 在 
参数 列表 中 扩展 开 的 数组 。 注 意 ， 使 用 剩余 参数 List 能 够 获取 所 有 传人 的 参数 。 扩 展 运算 
符 和 剩余 参数 可 以 在 不 增加 代码 的 前 提 下 更 清晰 地 展示 代码 意图 。 











function print(...list) { 
console. log(list) 


} 
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print(1, ...[2, 3], 4, ...[5]) 

Lf [Ly Zs 3 4,5] 
.apply 方法 的 一 个 不 足 之 处 是 ， 使 用 new 关键 字 实 例 化 对 象 会 非常 元 长 。 以 下 示例 用 new 
和 .appty 创建 了 Date 对 象 。 大 家 都 知道 JavaScript 中 日 期 的 月 份 是 从 0 开始 的 ， 因 此 11 
是 指 12 月 。 思 考 一 下 ， 为 了 实例 化 Date 对 象 ， 我 们 的 代码 要 扭曲 成 什么 样 。 





new (Date.bind.apply(Date, [null, 2015, 11, 31])) 
// <- Thu Dec 31 2015 


如 下 所 示 ， 扩 展 运 算 符 能 够 避免 这 些 问 题 ， 我 们 只 需要 关注 最 重要 的 内 容 。 在 以 下 示例 的 
new 实例 化 过 程 中 ，Date 函数 使 用 .… 扩展 了 动态 的 参数 列表 。 





new Date(...[2015，11，31]) 
// <- Thu Dec 31 2015 


下 列表 格 总 结 了 上 述 讨论 的 扩展 运算 符 的 用 例 。 





用 例 ES5 ES6 

数组 的 连接 [1, 2].concat(more) [1, 2, ...more] 

将 一 个 数组 放 入 列表 list.push.apply(list, items) list.push(...items) 
解构 a = list[0], other = list.slice(1) [a, ...other] = list 


new 关键 字 和 apply 方法 new (Date.bind.apply(Date,[null,2015,31,8])) new Date(...[2015,31,8]) 


2.5 ”模板 字面 量 


模板 字面 量 是 对 常规 JavaScript 字符 串 的 巨大 改进 。 例 如 ， 模 板 字 面 量 不 使 用 单 引号 或 双 
引号 进行 声明 ， 而 是 使 用 反 引 号 “”。 






































var text =“`This is my first tempLate literal. 





由 于 模板 字面 量 使 用 反 引 号 作为 定 界 符 ， 在 使 用 模板 字面 量 声明 字符 串 时 ， 不 需要 再 转 义 
其 中 的 '， 和"， 具 体 示 例如 下 所 示 。 























var text = ‘I'm "amazed" at these opportunities!. 





最 值得 一 提 的 是 ， 模 板 字 面 量 中 可 以 插入 JavaScript 表达 式 。 


2.5.1 字符 串 插值 
模板 字面 量 允 许 我 们 在 模板 中 插入 任意 的 JavaScript 表达 式 。 当 执行 到 模板 字面 量 表达 式 
时 ， 则 会 计算 表达 式 并 返回 结果 。 以 下 示例 在 模板 字面 量 内 插入 了 一 个 nane 变量 。 









































"Shannon' 
‘Hello, ${ name }!° 


Var Name 
var text 
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console. log(text) 
// <- 'Hello, Shannon!' 








前 面 说 过 ， 除 了 变量 ， 还 可 以 使 用 任意 的 JavaScript 表达 式 。 我 们 可 以 将 模板 字面 量 中 的 
表达 式 当 作 模 板 执行 前 定义 的 一 个 变量 ， 执 行 结果 是 将 各 变量 和 其 余 字 符 串 连接 起 来 。 这 
么 做 的 好 处 是 ， 代 码 更 容易 维护 ， 不 需要 再 手动 拼接 各 字符 串 和 表达 式 。 此 外 ， 表 达 式 中 
使 用 的 变量 、 调 用 的 函数 等 都 必须 在 当前 作用 域内 可 用 。 


在 模板 字面 量 中 插入 多 少 表达 式 逻 辑 取 决 于 自己 的 编码 风格 。 以 下 代码 实例 化 了 一 个 Date 
对 象 ， 并 将 其 格式 化 为 对 人 友好 的 可 读 格式 ， 然 后 插入 模板 字面 量 。 



















































































‘The time and date is ${ new Date().toLocaLeString() }.°. 
// <- 'the time and date is 8/26/2015, 3:15:20 PM' 


同样 ， 我 们 也 可 以 在 模板 字面 量 中 插入 数学 运算 。 








‘The result of 2+3 equals $S{f 2+3}. 
// <- 'The result of 2+3 equals 5' 








[Es 
只 


其 至 还 可 以 岁 套 模板 字面 量 ， 因 为 它们 也 是 合法 的 JavaScript 表 





‘This template literal ${ ‘is ${ 'nested' } }!° 
// <- 'This template literal is nested!' 











模板 字面 量 的 另 一 个 优势 是 支持 多 行 字符 串 。 














2.5.2 ”多 行 模 板 字 面 量 

在 使 用 模板 字面 量 之 前 ， 如 果 想 要 在 JavaScript 中 表示 一 个 多 行 字 符 串 ， 则 必须 借助 转 义 
符 、 字 符 串 连接 、 数 组 ， 甚 至 是 注释 。 以 下 代码 总 结 了 ES6 前 的 多 行 字 符 串 最 常见 的 几 种 
表示 法 。 




















var escaped = 

'The first line\n\ 
A second line\n\ 
Then a third line' 


var concatenated = 
'The first line\n' ° 
'A second line\n' . 
"Then a third line' 


var joined = [ 

'The first line', 
'A second line', 
"Then a third line' 
] .join('\n') 
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ES6 中 可 以 使 用 反 引 号 来 表示 。 模 板 字 面 量 默认 支持 多 行 字符 串 。 以 下 代码 中 没有 \n 转 
义 、 连 接 符 ， 也 不 需要 引入 数组 。 

var multiline = 

‘The first line 


A second line 
Then a third line. 


需要 在 一 段 HTML 中 插入 多 个 变量 时 ， 多 行 字符 串 的 优势 就 显现 出 来 了 。 如 果 需 要 在 模 
板 中 展示 一 个 列表 ， 那 么 可 以 直接 遍历 这 个 列表 ， 将 对 应 的 内 容 添加 到 相应 的 标记 ， 然 
后 通过 插值 表达 式 返 回 join 拼接 后 的 结果 。 这 使 得 在 模板 中 声明 子 组 件 变 得 非常 容易 ， 
如 下 所 示 。 





var book = { 
title: 'Modular ES6', 
excerpt: 'Here goes some properly sanitized HTML', 
tags: ['es6', 'template-literals', 'es6-in-depth'] 


} 
var html = ‘<article> 
<header> 
<h1i>${ book.title }</h1> 
</header> 
<section>${ book.excerpt }</section> 
<footer> 
<ul> 
${ 
book .tags 
.map(tag => ‘<li>${ tag }</LL> ) 
.join('\n 的 
} 
</ul> 
</footer> 
</article>. 





上 述 代码 会 生成 如 下 所 示 的 HTML 结构 。 我 们 可 以 看 到 ， 空 格 保留 下 来 了 “， 并 通过 join 
方法 中 的 一 连 串 空格 确保 了 <ti> 标签 正确 缩 进 。 


<article> 
<header> 
<h1>ModuLar ES6</h1> 
</header> 
<section>Here goes some properly sanitized HTML</section> 
<footer> 
<ul> 
<li>es6</li> 
<li>template-literals</li> 
<li>es6-in-depth</li> 



































注 3: 在 使 用 多 行 模板 字面 量 时 ， 空 格 并 不 会 自动 保留 。 多 数 情况 下 ， 提 供 足 够 的 缩 进 就 能 使 其 保留 空格 。 
因此 ， 需 要 避免 在 代码 块 伐 套 时 产生 不 正确 的 缩 进 。 
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</ul> 
</footer> 
</article> 


多 行 模板 字面 量 在 缩 进 方面 存在 问题 。 以 下 示例 中 的 函数 内 包含 一 个 模板 字面 量 ， 模 板 字 


面 量 内 的 代码 有 着 同样 的 缩 进 。 我 们 期 待 的 结果 可 能 是 没有 缩 进 的 ， 但 最 后 字符 串 的 前 面 
会 保留 四 个 空格 的 缩 进 。 





function getParagraph() { 
return “ 
Dear Rod, 
This is a template literal string that's indented 
four spaces. However, youyu may have expected for it 
to be not indented at all. 
Nico 


} 
我 们 可 以 通过 以 下 的 通用 函数 来 移 除 结果 字符 串 中 的 每 一 行 的 缩 进 ， 但 这 么 做 并 不 理想 。 





function unindent(text) { 
return text 
.Split('\n') 
.map(line => line.slice(4)) 
.join('\n') 
.trim() 


} 


有 时 ， 最 好 在 插值 表达 式 的 结果 插入 模板 前 对 其 进行 预 处 理 。 对 于 这 些 更 高 级 的 用 例 ， 需 
要 用 到 另 一 种 名 为 标签 模板 的 模板 字面 量 。 


2.5.3 标签 模板 

通常 情况 下 ，JavaScript 中 的 \ 具有 特殊 含义 ， 代 表 转 义 。 比 如 ，\n 表示 换行 ，\u99f1 表 
示 i。String.raw 标 签 模板 可 以 使 得 转 义 字符 不 进行 转 义 。 以 下 的 代码 展示 了 如 何 使 用 
String.raw， 其 中 \n 并 没有 解释 为 换行 。 























var text = String.raw'`"\n" is taken literally. 
It'LL be escaped instead of interpreted.. 
console. log(text) 

// "\n" is taken literally. 

// It'LL be escaped instead of interpreted. 





模板 字面 量 的 前 缀 String.raw 是 一 个 标签 模板 ， 用 于 解析 模板 。 标 签 模板 接受 一 个 数组 
参数 和 其 他 参数 ， 数 组 中 包含 模板 的 每 一 个 静态 部 分 ， 其 他 参数 对 应 每 个 表达 式 的 计算 
结果 。 
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思考 以 下 代码 中 的 标签 模板 。 


tag Hello, ${ name }. I am ${ emotion } to meet you!. 


实际 上 ， 标 签 模 板 最 终 会 解释 为 以 下 代码 中 的 函数 调用 。 


tag( 
['Hello, ', '. Iam ', ' to meet you!'], 
'Maurice', 
'thrilled' 

) 


依次 取出 模板 中 的 每 个 部 分 并 和 相 邻 的 表达 式 拼 凑 在 一 起 ， 直 到 最 终 拼凑 完 横 板 中 的 所 有 
部 分 ， 这 就 是 结果 字符 串 。 如 果 不 知道 默认 模板 字面 量 tag 内 部 是 如 何 实现 的 ， 那 么 很 难 
理解 参数 列表 。 因 此 ， 我 们 先 探讨 一 下 tag 的 内 部 实现 。 







































































以 下 代码 是 默认 标签 tag 的 一 种 可 能 实现 方式 。 当 不 显 式 指定 标签 模板 时 ， 它 的 功能 与 模 
板 字面 量 进行 处 理 时 相同 。 它 会 将 parts 数组 归纳 为 一 个 值 ， 以 模板 的 第 一 部 分 开头 ， 依 
次 连接 values 中 的 值 和 模板 中 的 内 容 ， 最 终 的 值 就 是 模板 字面 量 的 计算 结果 。 我 们 用 剩余 
参数 语法 获取 ...values， 从 而 更 便捷 地 获取 模板 字面 量 中 每 个 表达 式 的 计算 结果 。 由 于 
表达 起 比较 简单 我 们 还 使 用 了 隐 式 return 的 箭头 函数 。 


function tag(parts, ...values) { 
return parts.reduce( 
(all, part, index) => all + values[index - 1] + part 
) 
} 


可 以 使 用 以 下 代码 来 尝试 运行 上 述 tag 模板 。 我 们 可 以 看 到 ， 运 行 结果 和 不 使 用 tag 时 相 
同 ， 因 为 上 述 代码 正 是 对 默认 模板 行为 的 实现 。 


















































var Name = 'Maurice' 

var emotion = 'thrilled' 

var text = tag‘Hello, ${ name }. I am ${ emotion } to meet you!. 
console. log(text) 

// <- 'Hello Maurice, I am thrilled to meet youl 


标签 模板 还 有 很 多 其 他 用 法 。 比 如 ， 可 以 将 用 户 输入 变 为 大 写 。 以 下 的 代码 实现 了 这 一 功 
能 。 我 们 对 tag 进行 了 一 些 简 单 的 修改 ， 以 便 任意 插入 的 字符 串 都 会 转 为 大 写 形式 .。 





function upper(parts, ...values) { 
return parts.reduce((all, part, index) => 
all + values[index - 1].toUpperCase() + part 


) 
} 
var name = 'Maurice' 
var emotion = 'thrilled' 


upper ‘Hello, ${ name }. I am ${ emotion } to meet you!. 
// <- 'Hello MAURICE, I am THRILLED to meet youl 








标签 模板 还 有 一 个 更 有 用 的 用 法 ， 即 可 以 用 它 来 自动 确保 模板 中 插入 表达 式 的 安全 性 。 假 
设 有 一 个 模板 ， 其 中 所 有 表达 式 都 是 用 户 输入 的 内 容 ， 我 们 可 以 虚构 一 个 sanitize 库 来 移 
除 HTML 标签 和 类 似 的 危害 ， 从 而 阻止 用 户 在 网 站 中 注入 恶意 的 HTML， 防 止 跨 域 脚 本 
(XSS，cross-site scripting) 攻击 。 








function sanitized(parts, ...values) { 
return parts.reduce((all, part, index) => 
all + sanitize(values[index - 1]) + part 
) 
} 
var comment = 'Evil comment<iframe src="http://evil.corp"> 
</iframe>' 
var html = sanitized <div>${ comment }</div>. 
console.log(html) 
// <- '<div>Evil comment</div>' 


看 ， 政 恶 的 <iframe> 差点 就 得 过 了 。 介 绍 了 这 么 多 ES6 的 改进 后 ， 接 下 来 我 们 探讨 ES6 
中 的 Let 和 const 声明 。 


2.6 Let 和 const 声 明 


let 声明 是 ES6 中 最 广为人知 的 特性 之 一 。 它 和 var 声明 功能 相似 ， 但 有 着 不 同 的 作用 域 
规则 。 





关于 作用 域 ，JavaScript 有 一 套 非 常 复杂 的 规则 集 ， 复 杂 到 足以 弄 疯 很 多 初次 尝试 弄 懂 
JavaScript 变量 工作 原理 的 程序 员 。 最 终 ， 发 现 变量 提升 后 ， 你 才能 逐渐 理解 变量 的 工作 
原理 。 变 量 提升 指 不 管 变量 声明 在 代码 的 哪个 位 置 ， 都 会 提升 到 所 在 作用 域 的 顶部 。 参 见 
以 下 示例 。 











function isItTwo(value) { 
if (value === 2) { 
var two = true 
} 


return two 


isItTwo(2) 

// <- true 
isItTwo(l 'two') 
// <- undefined 





虽然 two 是 在 if 代码 分 支 语 句 中 声明 的 ， 但 仍然 可 以 在 分 支 语 句 外 访问 到 它 ， 因 此 以 上 代 
码 能 够 正常 工作 。 这 一 行为 是 因为 var 声明 会 绑 定 到 所 在 封闭 作用 域 ， 可 以 是 函数 作用 域 
或 全 局 作用 域 。 结 合 变量 的 提升 ， 上 述 代码 等 同 于 以 下 代码 。 














function isItTwo(value) { 
var two 




















ES6 基 础 | 37 


if (vaLue === 2) { 
two = true 


} 


return two 


} 


不 管 我 们 喜欢 与 否 ， 与 使 用 块 级 作用 域 的 变量 相 比 ， 变 量 提升 很 令 人 困惑 。 块 级 作用 域 通 
过 花 括号 声明 ， 而 不 是 函数 。 


2.6.1 块 级 作用 域 和 Let 声 明 

块 级 作用 域 允许 我 们 在 现 有 分 支 代码 语句 (如 if、for 或 white) 的 基础 上 艇 套 任意 新 的 
如 块 ， 以 创建 更 深 的 作用 域 ， 而 不 需要 声明 新 的 函数 。 只 要 我 们 愿意 ，JavaScript 允许 创 
建 任意 数量 的 块 。 











{{{{{ var deep = 'This is available from outer scope.'; }}}}} 
console. log(deep) 
// <- 'This is available from outer scope.' 





使 用 var 声明 的 变量 是 基于 词法 作用 域 的 ， 仍 然 可 以 在 deep 变量 声明 所 在 块 的 外 部 访问 到 
该 变量 ， 并 且 不 会 报错 。 但 如 果 能 够 在 以 下 几 种 情况 下 抛 出 异常 ， 那 么 会 更 有 用 : 


。 访问 内 部 变量 会 破坏 代码 的 封装 性 ， 

内 部 变量 和 外 部 变量 没有 任何 关联 ， 
。 同 级 的 兄弟 块 中 可 能 想 要 使 用 相同 的 变量 名 ， 
。 某 个 父 级 块 中 已 经 存在 名 称 相同 的 变量 ， 但 仍然 需要 在 内 部 使 用 该 变量 。 


let 声明 是 var 声明 的 一 个 替代 方案 。 它 遵循 块 级 作用 域 规则 ， 而 不 是 默认 的 词法 作用 域 
规则 。 使 用 var 时 ， 只 能 通过 般 套 函数 来 创建 更 深 的 作用 域 。 但 使 用 Let 时， 新 增 一 对 花 
括号 即 可 创建 更 深 的 作用 域 。 这 就 意味 着 通过 们 块 即 可 创建 新 的 作用 域 ， 无 须 创建 新 的 
国 数 。 














Let topmost = {} 


Let inner = {} 


{ 


let innermost = 人 
} 
// 在 此 处 尝试 访问 innermost 会 抛 出 异常 
} 


// 在 此 处 尝试 访问 inner 会 抛 出 异常 
// 在 此 处 尝试 访问 innermost 会 抛 出 异常 


Let 声明 有 一 个 非常 有 用 的 用 法 ， 如 果 在 for 循环 中 使 用 let， 则 变量 的 作用 域 会 封闭 在 特 
环 体内 ， 如 下 所 示 。 









































for (let i = 0; i < 2; i++) { 
console. log(i) 
// <- 0 
// <- 1 


console.log(i) 
// <- i is not defined 


循环 内 声明 的 let 变量 会 封闭 在 循环 内 的 每 一 步 ， 因 此 ， 在 函数 体内 的 异步 函数 调用 中 使 
用 这 些 变量 也 能 够 如 预期 那样 工作 ， 这 一 点 和 使 用 var 声明 的 变量 恰恰 相反 。 我 们 来 看 看 
具体 的 示例 。 


首先 ， 我们 来 看 一 个 关于 var 作用 域 工 作 原 理 的 典型 示例 。 以 下 示例 中 的 站 变量 会 绑 定 到 
printNumbers 函数 作用 域 ， 在 循环 添加 每 个 超时 回调 时 ， 它 的 值 会 一 直 增加 到 106。 等 到 每 
隔 100 毫秒 执行 每 个 回调 函数 时 ，i 的 值 是 18， 因 此 每 次 都 会 输出 10。 




















function printNumbers() { 
for (var i = 0; i < 10; i+t+) { 
setTimeout(function () { 
console. log(i) 
}, i * 100) 


printNumbers() 








相反 ， 使 用 tet 声明 会 将 变量 绑 定 到 块 级 作用 域 。 虽 然 每 次 循环 仍然 会 递增 变量 的 值 ， 但 
每 次 循环 都 会 创建 一 个 新 的 绑 定 。 也 就 是 说 ， 每 次 添加 超时 回调 时 ， 每 个 回调 函数 都 会 持 
有 一 个 保存 当前 变量 ; 的 绑 定 的 引用 ， 因 此 最 终 会 输出 期 望 结果 : 9~9。 

















function printNumbers() { 
for (let i = 0; i < 10; i++) { 
setTimeout(function () { 
console. log(i) 
}, i * 100) 
} 


printNumbers() 


除了 以 上 内 容 ，let 还 涉及 “暂时 性 死 区 ”(TDZ，temporal dead zone) 这 一 概念 。 





2.6.2 ”暂时 性 死 区 
毫 无 疑问 ， 以 下 这 样 的 代码 段 必 然 会 抛 出 异常 。 从 作用 域 开 始 到 let 声明 的 执行 前 ， 访 问 
let 声明 的 变量 都 会 报错 。 这 就 是 所 谓 的 暂时 性 死 区 。 

{ 


console.log(name) 
// <- ReferenceError: name is not defined 
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Let name = 'Stephen Hawking' 


} 


如 果 在 let name 声明 执行 前 访问 变量 nane， 那 么 程序 会 抛 出 异常 。 在 定义 name 变量 前 声 








明 一 个 引用 该 变量 的 函数 是 没 问 题 的 ， 只 要 不 在 暂时 








Let name 声明 前 ，name 都 处 于 暂时 性 死 区 。 以 下 代码 六 
有 在 name 的 暂时 性 死 区 内 执行 。 


function readName() { 
return name 

} 

let name = 'Stephen Hawking 

console.log(readName()) 

// <- 'Stephen Hawking' 


F 不 会 报错 ， 


生死 区 内 执行 该 函数 即 可 。 在 执行 








因为 return nanme 并 没 








相反 ， 以 下 代码 会 报错 ， 因 为 在 name 离开 暂时 性 死 区 前 就 访问 了 name 变量 。 





function readName() { 
return name 


console.log(readName()) 
// ReferenceError: name is not defined 
let name = 'Stephen Hawking 





注意 ， 即 使 声明 时 没有 对 name 赋值 ， 上 述 示例 的 语义 并 不 会 发 生 改 变 。 以 下 代码 同样 会 抛 














出 异常 ， 因 为 在 暂时 性 死 区 内 访问 了 name 变量 。 








function readName() { 
return name 


console.log(readName()) 
// ReferenceError: name is not defined 
let name 


以 下 代码 能 够 正常 工作 ， 因 为 它 在 离开 暂时 性 死 区 后 才 访 问 name 变量 。 











function readName() { 
return name 

} 

let name 

console.log(readName()) 

// <- undefined 








需要 特别 记 住 一 点 ， 在 函数 声明 中 访问 暂时 性 死 区 中 的 变量 是 没 问题 的 ， 只 要 访问 处 于 暂 


时 性 死 区 中 变量 的 语句 在 let 声明 语句 之 后 执行 即 可 。 














暂时 性 死 区 的 主要 目的 是 更 轻松 地 捕获 错误 ， 防 止 在 用 户 代 码 声明 











变量 前 就 访问 变量 ， 从 


而 避免 一 些 不 可 预期 的 行为 。 在 ES6 之 前 ， 由 于 变量 的 提升 和 不 良 的 编码 习惯 ， 这 一 情 











况 很 常见 。 现 在 可 以 在 ES6 中 很 轻松 地 避免 该 问题 。 记 住 ， 提 升 仍然 适用 于 Let ， 即 变量 





入 后 
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在 作用 域 的 开始 就 会 创建 ， 但 会 产生 暂时 性 死 区 ， 这 些 变量 在 声明 语句 没有 执行 前 无 法 访 
问 ， 离 开 暂 时 性 死 区 之 后 才能 够 访问 。 





x 





探讨 完 暂 时 性 死 区 后 ， 现 在 是 时 候 讨 论 const 声明 了 。 它 与 Let 相似 ,但 也 有 很 多 不 同 。 


2.6.3 const 声 明 

与 Let 相似，const 声明 也 遵循 块 级 作用 域 ， 并 存在 暂时 性 死 区 。 实 际 上 ， 暂 时 性 死 区 就 
是 为 了 const 实现 的 ， 之 后 为 了 保持 统一 ， 也 应 用 于 Let 了 。const 之 所 以 需要 暂时 性 死 
区 ， 是 因为 如 果 没 有 暂时 性 死 区 ， 则 可 以 在 const 声明 执行 前 给 提升 的 const 变量 赋值 ， 
这 样 执行 声明 语句 时 就 会 报错 。 和 暂时 性 死 区 就 是 为 了 确保 只 在 声明 时 对 const 进行 赋值 而 
实现 的 ， 这 可 以 避免 使 用 let 的 一 些 潜在 问题 ， 并 且 使 其 他 依赖 于 暂时 性 死 区 的 特性 更 容 


以 下 示例 表明 ，const 和 tet 都 遵循 块 级 作用 域 规则 。 






































const pi = 3.1415 
{ 
Const pi = 6 
console. log(pi) 
// <- 6 
} 
console.log(pi) 
// <- 3.1415 





前 面 提 过 let 和 const 有 很 多 不 同 之 处 。 第 一 个 不 同 之 处 是 使 用 const 声明 的 变量 必须 在 


声明 时 就 进行 初始 化 ， 如 下 所 示 。 
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const pi = 3.1415 
const e // 语法 错误 ， 缺 少 初始 化 





除了 在 声明 时 进行 初始 化 ， 使 用 const 声明 的 变量 还 无 法 重复 赋值 ， 即 const 完成 初始 化 
后 无 法 再 改变 其 值 。 在 严格 模式 下 ， 尝 试 改 变 const 变量 的 值 会 报错 。 非 严格 模式 下 不 会 
报错 ， 但 改变 不 生效 ， 如 下 所 示 。 




















const people = ['Tesla', 'Musk'] 
people = [] 

console.log(people) 

// <- ['Tesla', 'Musk'] 


氏 
| 
全 
于 
ea 
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需要 注意 的 是 ， 创 建 一 个 const 变量 并 不 意味 着 所 赋 的 值 不 可 改变 。 这 
点 ， 强 烈 建议 你 仔细 阅读 以 下 警告 信息 。 
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使 用 const 声明 的 变量 并 不 是 不 可 改变 的 


使 用 const 声明 只 是 意味 着 所 声明 的 变量 会 一 直 桂 有 对 同一 个 对 象 或 基本 值 的 引用 ， 
保持 不 变 的 只 是 这 个 引用 。 引 用 保持 不 变 ， 但 是 引用 指向 的 值 并 不 是 不 可 改变 的 。 


以 下 示例 表明 ， 尽 管 people 的 引用 不 能 改变 ， 数 组 本 身 确实 可 以 修改 。 如 果 数 组 是 不 
可 变 的 ， 那 么 不 可 能 产生 以 下 结果 。 


const people = ['Tesla', 'Musk'] 
people.push('Berners-Lee') 
console.log(people) 

// <- ['Tesla', 'Musk', 'Berners-Lee'] 


const 声明 会 禁止 变量 绑 定 到 一 个 新 的 引用 。 以 下 代码 从 另 一 方面 说 明了 该 问题 。 我 
们 用 const 创建 了 一 个 people 变量 ， 然 后 将 这 个 变量 赋 给 了 一 个 普通 的 用 var 声明 的 
hunans 变量 。 我 们 可 以 给 hunans 重新 赋值 其 他 引用 ， 因 为 它 并 不 是 使 用 const 声明 
的 。 但 我 们 不 能 将 其 他 引用 赋 给 peopte， 因 为 它 是 通过 const 声明 的 。 


const people = ['Tesla', 'Musk'] 
var humans = people 

humans = 'evil’ 
console.log(humans) 

// <- 'evil' 


如 果 想 要 确保 值 不 变 ， 可 以 使 用 0bject.freeze 这 样 的 池 数 。 使 用 0bject.freeze 可 以 
禁止 扩展 传 入 的 对 象 ， 如 下 所 示 。 


const frozen = 0bject.freeze( 
['Ice', 'Icicle', 'Ice cube'] 
) 
frozen.push('Water') 
// Uncaught TypeError: Can't add property 3 
// object is not extensible 











接 下 来 我 们 一 起 讨论 一 下 const 和 tet 的 优势 。 


2.6.4 ”const 和 tet 的 优势 


永远 不 要 为 了 使 用 新 特性 而 使 用 新 特性 。ES6 的 特性 应 该 合理 应 用 在 能 够 真正 提升 代码 可 
读 性 和 可 维护 性 的 地 方 。 很 多 情况 下 ，let 声明 能 够 简化 一 部 分 代码 逻辑 ， 比 如 需要 在 函 
数 的 顶部 进行 var 声明 ， 以 确保 变量 的 提升 不 会 产生 意 想 不 到 的 结果 时 。 使 用 Let 就 可 以 
不 用 在 整个 函数 的 顶部 进行 声明 ， 而 是 在 块 级 作用 域 的 顶部 声明 ， 这 可 以 减少 思维 从 作用 
域 顶部 开始 所 要 延续 的 范围 。 





























使 用 const 声明 能 够 有 效 地 避免 一 些 问 题 。 以 下 代码 展示 了 一 个 常见 的 易 错 场景 : 将 
items 的 引用 传递 给 checklist 国 数 时 ， 这 个 国 数 会 返回 一 个 todo API， 以 用 于 操作 传人 的 
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items 引用 。 当 items 变量 改 为 引用 其 他 数组 时 ， 情 况 就 完全 不 一 样 了 ，todo API 仍然 会 
操作 items 之 前 引用 的 值 ， 但 items 已 经 指向 了 其 他 值 。 


var items = ['a'，'b'，'"c'] 
var todo = checklist(items) 
todo.check() 
console.log(items) 
// <- ['b', 'c'] 
items = ['d', 'e'] 
todo.check() 
console.log(items) 
// <- 输出 为 ['d' ，'e']。 如 果 items 是 常量 的 话 ， 那 么 输出 应 该 是 ['c'] 
function checklist(items) { 
return { 
check: () => items.shift() 
} 
} 














这 种 问题 很 难 调试 ， 可 能 需要 花 不 少时 间 才 能 查 出 是 引用 改变 导致 出 现 问题 。const 声明 
则 可 以 防止 这 一 错误 发 生 ， 因 为 使 用 const 会 在 运行 时 报错 (严格 模式 下 )， 从 而 能 在 产生 
问题 时 定位 到 问题 所 在 。 

















使 用 const 声明 的 另 一 个 好 处 是 能 够 显 式 地 定义 不 可 重复 赋值 的 变量 。const 表明 变量 引 
用 的 绑 定 是 只 读 的 ， 因 此 阅读 代码 时 不 用 关心 这 些 党 量 。 

















如 有 果 默 认 使 用 const 来 声明 变量 ， 使 用 let 来 声明 需要 重复 赋值 的 变量 ， 那 么 所 有 的 变量 
都 会 遵循 相同 的 作用 域 规 则 ， 这 会 使 代码 变 得 更 易于 理解 。 为 什么 提议 默认 使 用 const 声 
明 方 式 呢 ? 因为 它 的 功能 明确 且 单一 : 禁止 重新 赋值 、 遵 循 块 级 作用 域 ， 并 且 不 能 在 变量 
声明 语句 执行 前 访问 变量 。 虽 然 Let 语句 允许 重新 赋值 ， 但 它 的 行为 和 const 类 似 ， 因 此 ， 
如 有 果 需 要 一 个 可 以 重新 赋值 的 变量 ， 则 可 以 选择 使 用 Let 声明 。 














hy 









































男 一 方面 ，var 声明 方式 更 加 复杂 ， 由 于 需要 遵循 图 数 作用 域 规 则 ， 在 分 支 语 句 中 使 用 较 
为 困难 。var 允许 重新 赋值 ， 且 可 以 在 变量 声明 语句 执行 前 访问 变量 。 因 为 const 和 Let 
所 做 的 事情 更 少 、 更 简单 ， 所 以 不 推荐 在 现代 JavaScript 中 使 用 var， 因 而 var 声明 在 现代 
JavaScript 代码 库 中 并 不 常见 。 












































本 书 上 默认 使 用 const， 并 在 需要 重新 赋值 时 使 用 let。 第 9 章 将 探讨 这 样 做 的 深层 原因 。 
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第 3 章 


类 、 符 号 、 对 象 和 装饰 器 








前 面 探讨 了 ES6 语法 方面 的 基本 改进 ， 现 在 是 时 候 探讨 其 他 新 增 内 容 了， 如 类 和 符号 。 类 
基于 传统 的 以 类 为 基础 的 编程 范式 提供 了 一 种 表示 原型 链 继承 的 新 语法 。 与 字符 串 、 布 尔 
值 、 数 值 一 样 ， 符 号 是 一 种 新 的 JavaScript 基本 值 类 型 。 本 章 将 探讨 如 何 使 用 符号 来 定义 
协议 。 介 绍 完 类 和 符号 后 ， 我 们 会 简单 探讨 一 下 ES6 中 的 object 新 增 的 内 置 静态 方法 。 








Et 









































3.1 类 

JavaScript 是 一 门 基于 原型 的 语言 ， 类 通常 认为 是 原型 继承 的 一 种 语法 糖 。 原 型 继承 与 类 
之 间 的 最 主要 区 别 是 ， 类 可 以 用 extend 继承 其 他 类 ， 这 样 我 们 就 可 以 继承 内 置 的 Array 对 
象 ， 但 在 ES6 之 前 这 么 做 是 很 复杂 的 。 

















一 些 习惯 其 他 范式 的 程序 员 并 不 熟悉 原型 链 ， 有 了 class 关键 字 之 后 ，JavaScript 更 容易 为 
他 们 所 接受 。 


3.1.1 使 用 类 

要 想 学 习 新 的 语言 特性 ， 最 好 先 找 到 语言 中 原 有 的 实现 ， 然 后 研究 新 的 特性 如 何 改进 之 前 
的 用 例 。 接 下 来 我 们 先 看 一 个 简单 的 基于 原型 的 JavaScript 构造 函数 ， 然 后 将 其 与 ES6 中 
的 类 语法 进行 比较 。 

以 下 代码 段 定 义 了 构造 函数 Fruit， 并 在 其 原型 上 添加 了 两 个 方法 。 构 造 函数 中 有 3 个 属 
性 : 表示 名 称 的 name、 表 示 水 果 热 量 的 calories， 以 及 表示 水 果 块 数 的 pieces (默认 为 1)。 
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原型 上 有 . 


chop 和 .bite 两 个 方法 。.chop 方法 会 将 水 果 多 切 出 一 块 。 而 传人 :bite 方法 的 




















person 会 吃 掉 一 块 水 果 ， 并 且 其 satiety 饱 食 度 会 增加 ， 增 加 的 值 为 剩余 热量 除 以 剩余 的 水 


果 块 数 。 


function Fruit(name, calories) { 
this.name = name 
this.calories = calories 
this.pieces = 1 


} 


Fruit. 


prototype.chop = function () { 


this.pieces++ 


} 


Fruit. 


prototype.bite = function (person) { 


if (this.pieces < 1) { 
return 


} 


const calories = this.calories / this.pieces 
person.satiety += calories 

this.calories -= calories 

this.pieces-- 


} 


以 上 代码 比较 简单 ， 从 中 可 以 看 出 : 有 一 个 接受 两 个 参数 的 构造 函数 、 两 个 方法 以 及 一 些 
属性 。 以 下 代码 创建 了 一 个 Fruit 和 一 个 person， 并 且 将 水 果 切 成 4 块 ， 然 后 吃 掉 了 其 中 


3 块 。 


Const 
const 


apple. 
apple. 
apple. 
apple. 
apple. 
apple. 





person = { satiety: 0 } 

apple = new Fruit('apple', 140) 
chop() 

chop() 

chop() 

bite(person) 

bite(person) 

bite(person) 


console.log(person.satiety) 


// < 


105 


console.log(apple.pieces) 


// < 


1 


console.log(apple.calories) 


A/ 


35 


以 下 代码 使 用 了 class 语法 ， 从 中 可 以 看 出 ，constructor 函数 显 式 地 声明 在 Fruit 类 中 ， 
且 方法 声明 使 用 了 对 象 字面 量 的 方法 定义 语法 。 对 比 class 方法 和 前 面 基 于 原型 的 方法 ， 


能 够 发 现 : 





定义 方法 时 ， 避 免 显 式 指向 Fruit.prototype 的 引用 可 以 减少 重复 代码 。 实 际 





上 ,将 整个 声明 写 在 class 语句 块 内 ， 还 能 够 帮助 阅读 者 理解 整 块 代码 的 作用 ， 更 清晰 地 
表达 所 声明 类 的 意图 。 最 后 ， 将 constructor 显 式 声明 为 Fruit 的 成 员 方法 使 得 class 语 
法 比 基 于 原型 的 类 语法 更 易 理解 。 
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class Fruit { 
constructor(name, calories) { 
this.name = name 
this.calories = calories 
this.pieces = 1 


} 
chop() { 
this.piecest+t+ 
} 
bite(person) { 
if (this.pieces < 1) { 


return 
const calories = this.calories / this.pieces 
person.satiety += calories 
this.calories -= calories 


this.pieces-- 
} 
} 


能 你 还 设 有 广 意 到 一 个 不 容 忽 视 的 细节 ， 即 Fruit 类 中 的 方法 声明 之 间 没 有 用 逗号 分 隔 。 
其 实 ， 这 并 不 是 文字 编辑 的 玻 包 ，ctLass 语法 就 是 这 么 设计 的 。 这 一 差别 能 够 避免 我 们 误 
认为 对 象 和 类 之 间 存 在 某 些 关联 ， 但 实际 上 它们 并 没有 关联 。 此 外 ， 这 一 区 别 也 会 让 类 语 
法 更 适合 做 进一步 改动 ， 如 添加 公有 和 私有 属性 。 


这 段 基于 类 的 代码 和 前 面 所 写 的 基于 原型 的 代码 等 价 。 创 建 Fruit 实例 的 方式 一 点 也 没有 
改变 ;Fruit 的 API 方法 也 没有 任何 改变 。 使 用 Fruit 类 也 可 以 实例 化 一 个 苹果 ， 将 其 切 
成 更 小 的 4 块 ， 然 后 吃 掉 3 块 。 

































































值得 注意 的 是 ， 与 国 数 声明 不 同 ， 类 声明 不 会 提升 到 所 在 作用 域 的 顶部 。 因 此 ， 在 到 达 并 
执行 类 声明 之 前 ， 我 们 无 法 实例 化 或 进行 其 他 存 取 操 作 。 


new Person() // <- ReferenceError: Person is not defined 
class Person { 


} 


除了 前 面 所 说 的 类 声明 语法 ， 还 可 以 通过 表达 式 的 方式 声明 类 ， 这 一 点 与 国 数 声明 和 函数 
表达 式 相 似 。 我 们 可 以 在 表达 式 中 省 略 类 的 名 称 ， 如 下 所 示 。 


const Person = class { 
constructor(name) { 
this.name = name 
} 
} 


我 们 可 以 通过 函数 很 轻松 地 返回 类 表达 式 ， 从 而 用 最 少 的 代价 建立 一 个 类 的 工厂 函数 。 以 
下 示例 通过 第 头 函 数 动态 创建 了 JakePerson 类 ， 篆 头 函数 接受 一 个 name 参数 ， 然 后 通过 
super() 传 入 父 类 Person 的 构造 函数 中 。 





const createpPersonCLass = name => class extends Person { 
constructor() { 
super (name) 


} 


const JakePerson = createPersonCLass(']Jake ') 
const jake = new JakePerson() 


我 们 将 继续 深入 探讨 类 的 继承 ， 现 在 先 来 更 细致 地 研究 一 下 属性 和 方法 。 





3.1.2 类 的 属性 和 方法 
需要 指出 的 是 ，class 声明 中 的 constructor 方法 的 声明 是 可 选 的 。 以 下 代码 给 出 了 一 个 完 
全 有 效 的 类 声明 和 一 个 同名 的 空 构造 函数 ， 它 们 等 效 。 


class Fruit { 


} 


function Fruit() { 


} 


new Log() 的 参数 都 会 传人 constructor 方法 ， 我 们 可 以 使 用 这 些 参数 来 初始 化 类 的 实例 ， 
如 下 所 示 。 





class Log { 
constructor(...args) { 
console.log(args) 


} 


new Log('a', 'b', 'c') 


// <- L'a" 'b' 'c'] 








以 下 示例 中 的 类 展示 了 如 何在 每 个 实例 的 构造 过 程 中 创建 并 初始 化 一 个 名 为 count 的 属性 。 
get next 方法 表明 Counter 类 的 实例 会 有 一 个 next 属性 ， 访 问 该 属性 时 会 返回 该 方法 的 调 
用 结果 。 


























class Counter { 
constructor(start) { 
this.count = start 
} 
get next() { 
return this.count++ 
} 
} 


我 们 可 以 按照 以 下 示例 那样 使 用 Counter 类 。 每 次 访问 .next 属性 时 ，count 的 值 会 自动 加 1。 
尽管 很 有 用 ,但 是 这 种 用 例 通 常 更 适合 使 用 方法 实现 ， 而 不 是 神奇 的 get 属性 存 取 器 。 而 
且 我 们 要 当心 ， 不 要 滥用 属性 存 取 器 ， 使 用 滥用 了 存 取 器 的 对 象 会 令 人 感到 很 混乱 。 
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Const counter = new Counter(2) 
console.log(counter .next) 

// <- 2 
console.log(counter .next) 

// <- 3 
console.log(counter .next) 


11 滞 洒 

当 与 setter 方法 一 起 使 用 时 ， 存 取 器 能 够 在 对 象 和 底层 的 数据 存 取 之 间 搭 建 一 条 很 
有 趣 的 桥梁 。 思 考 以 下 示例 ， 我 们 定义 了 一 个 类 ， 该 类 可 以 通过 传 入 存储 的 key 值 从 
localStorage 中 存 取 JSON 数据 。 




















class LocalStorage { 
constructor(key) { 
this.key = key 


} 
get data() { 
return JSON.parse(localStorage.getItem(this.key)) 


set data(data) { 
localStorage.setItem(this.key, JSON.stringify(data)) 
} 
} 


我 们 可 以 按照 以 下 示例 那样 使 用 Localstorage 类 。 任 何 赋 给 tls.data 的 值 都 会 转换 为 

JSON 对 象 字 符 串 形式 ， 然 后 存 和 人 localstorage 中 。 读 取 属 性 时 ， 可 以 通过 同一 个 key 值 

获取 之 前 存储 的 内 容 ， 将 其 解析 为 JSON 对 象 并 返回 。 
const ls = new LocalStorage('groceries') 
ls.data = ['apples', 'bananas', 'grapes'] 


console.log(ls.data) 
// <- ['apples', 'bananas', 'grapes'] 




















除了 getter 和 setter， 我 们 还 可 以 定义 常规 的 实例 方法 ， 前 面 创建 Fruit 类 时 已 经 这 
么 做 了 。 以 下 示例 创建 了 一 个 能 吃 Fruit 的 Person 类 ， 然 后 实例 化 了 一 个 fruit 和 一 个 
person， 并 让 person 吃 了 fruit。 最 终 person 的 饱 食 度 等 于 49， 因 为 他 吃 光 了 整个 水 果 。 

















class Person { 
constructor() { 
this.satiety = 0 
} 
eat(fruit) { 
while (fruit.pieces > 0) { 
fruit.bite(this) 
} 
} 
} 
const plum = new Fruit('plum', 40) 
const person = new Person() 
person.eat(plum) 
console.log(person.satiety) 
// <- 40 
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有 了 时 需要 在 类 自身 中 添加 静态 方法 ， 而 不 是 在 实例 上 添加 成 员 方 法 。 在 ES6 之 前 ， 实 例 方 
法 显 式 地 添加 在 原型 链 上 ， 而 静态 方法 需要 直接 添加 在 构造 函数 上 。 





function Person() { 
this.hunger = 100 

} 

Person.prototype.eat = function () { 
this.hunger-- 

} 

Person.isperson = function (person) { 
return person instanceof Person 








} 
JavaScript 类 允许 通过 static 关键 字 定 义 Person.isPerson 这 样 的 静态 方法 。static 的 使 
用 方式 与 定义 getter 和 setter 时 的 get、set 相似 。 
以 下 示例 定义 了 MathHelper 类 ， 该 类 有 一 个 sun 方法 ， 该 方法 通过 Array#reduce 计算 所 有 





传人 的 数值 参数 的 总 和 。 











class MathHelper { 
static sum(...numbers) { 
return numbers.reduce((a, b) => a + b) 








} 
console.log(MathHelper .sum(1, 2, 3, 4, 5)) 
/1/ <- 15 
最 后 ， 值 得 一 提 的 是 ， 我 们 也 可 以 定义 静态 属性 存 取 器 ， 如 static get、static set。 在 














维护 类 的 全 局 配置 状态 或 在 单 例 模式 下 使 用 类 时 ， 这 一 点 尤为 有 用 。 当 然 ， 这 种 情况 下 ， 












































你 可 能 更 倾向 于 使 用 普通 对 象 ， 而 不 是 创建 一 个 不 会 实例 化 或 者 只 实例 化 一 次 的 类 。 毕 况 
这 就 是 JavaScript， 一 个 高 度 动态 的 语言 。 
3.1.3 类 的 继承 
我 们 可 以 使 用 普通 的 JavaScript 方法 来 实现 Fruit 类 的 继承 。 但 阅读 以 下 代码 段 后 ， 你 会 
发 现 ， 声明 子 类 时 ， 为 了 将 参数 传人 父 类 以 确保 正确 初始 化 子 类 ， 引入 了 为 
知识 点 ， 如 Parent.caLL(thts)， 并 将 基于 父 类 原型 创建 的 新 对 象 指定 为 子 类 的 原型 。 
可 以 找到 很 多 有 关 原 型 继承 的 资料 ， 这 里 不 再 详细 讨论 。 
function Banana() { 
Fruit.caLLCthis，"banana' ，105) 
} 
Banana.prototype = Object.create(Fruit.prototype) 
Banana.prototype.slice = function () { 
this.pieces = 12 
} 
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鉴于 没有 必要 记 住 以 上 这 种 实现 方式 ， 而 且 0bject.create 是 ES5 中 才 存 在 的 ， 以 前 的 开 
发 者 习惯 于 借助 类 库 来 解决 原型 继承 问题 ， 如 Node.js 中 的 util.inherits 方法 ， 因 为 支持 
度 更 好 ， 所 以 比 0bject.create 更 受 喜 爱 。 





const util = require('util') 
function Banana() { 
Fruit.call(this, 'banana', 105) 


util.inherits(Banana, Fruit) 
Banana.prototype.slice = function () { 
this.pieces = 12 
} 
除了 具有 name 属性 和 已 经 赋值 的 calories 属性 ， 以 及 额外 的 slice 方法 ，Banana 构造 国 
数 的 用 法 和 Fruit 没有 什么 不 同 。 其 中 slice 方法 能 够 直接 将 香蕉 切 成 12 块 。 以 下 代码 展 
示 了 吃 了 一 块 后 的 Banana 的 实际 状态 。 





const person = { satiety: 0 } 
const banana = new Banana() 
banana.slice() 
banana.bite(person) 
console.log(person.satiety) 
// <- 8.75 
consoLe.Log(banana.pieces) 

// <- 11 
consoLe.Log(banana.caLories) 
// <- 96.25 


类 统一 了 原型 继承 ， 但 到 现在 为 止 还 存在 很 大 的 争议 ， 因 为 很 多 库 正 在 党 试用 更 简单 的 方 
式 处 理 JavaScript 中 的 原型 继承 。 














Fruit 类 已 经 可 以 被 继承 了 。 以 下 代码 创建 了 继承 自 Fruit 类 的 Banana 类 。 此 时 ， 这 种 语 
法 能 够 清晰 地 表达 我 们 的 意图 ， 并 且 不 需要 彻底 理解 原型 继承 就 能 达到 想 要 的 结果 。 如 果 
想 要 将 参数 转 而 传 给 底层 的 Fruit 构造 函数 ， 可 以 使 用 super。super 关键 字 还 可 以 调用 父 
类 中 的 函数 (如 super.chop)， 并 不 局 限于 父 类 的 构造 函数 。 





























class Banana extends Fruit { 
constructor() { 
super('banana' , 105) 


slice() { 
this.pieces = 12 
} 
} 


虽然 class 关键 字 是 静态 的 ， 但 声明 类 时 仍然 可 以 利用 JavaScript 的 灵活 的 函数 式 编 程 特 
性 。 返 回 构造 函数 的 任何 表达 式 都 可 以 跟 在 extends 之 后 。 例 如 ， 我 们 可 以 创建 一 个 构造 
函数 工厂 函数 ， 然 后 将 其 作为 基 类 。 

















大 和 
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以 下 代码 定义 了 createjJuicyFruit 图 数 ， 通 过 super 调用 将 水 果 的 name 和 calories 传 到 
Fruit 类 中 。 然 后 我 们 要 做 的 就 是 创建 PLum， 使 其 继承 中 间 类 JuicyFruit。 
const createJuicyFruit = (...params) => 
class JuicyFruit extends Fruit { 
constructor() { 


this.juice = 0 
super(...params) 


squeeze() { 
if (this.calories <= 0) { 
return 
} 
this.calories -= 10 
this.juice += 3 


} 


class Plum extends createJuicyFruit('plum', 30) { 


} 


下 一 市 将 讨论 符号 。 虽 然 符 号 不 是 一 种 迭代 或 流 控 制 机 制 ， 但 学 习 符 号 对 理解 迭代 协议 至 
关 重 要 ， 后 面 的 章节 将 详细 讨论 迭代 协议 。 


3.2 符号 


符号 是 ES6 中 新 增 的 基本 值 类 型 ， 是 JavaScript 中 的 第 7 种 数据 类 型 。 与 字符 串 、 数 值 一 
样 ， 符 号 是 一 种 独一无二 的 数据 类 型 。 与 字符 串 、 数 值 不 同 的 是 ， 符 号 不 具备 字面 量 表 示 
形式 ， 如 字符 囊 中 的 'text'、 数 值 中 的 1。 符 号 的 主要 目的 是 实现 协议 。 例 如 ， 选 代 协 议 
使 用 符号 来 定义 如 何 迭 代 对 象 ，4.2 节 将 讨论 这 部 分 内 容 。 


符号 有 3 种 类 型 ， 每 种 类 型 是 用 不 同方 式 访问 的 : 本 地 符号 ， 通 过 内 置 符号 包装 对 象 创 
建 ， 并 通过 存储 引用 或 反射 来 访问 ， 全 局 符号 ， 通过 另 一 种 API 创建 ， 并 跨 代码 域 共享 ， 
“众所周知 ”的 符号 ， 内 置 于 JavaScript 中 ， 用 于 定义 内 部 语言 行为 。 
我 们 将 依次 探讨 这 3 种 类 型 ， 并 在 探讨 过 程 中 探索 可 能 的 使 用 方式 。 我 们 先 从 本 地 符号 
开始 。 


3.2.1 本 地 符号 


可 以 使 用 符号 包装 对 象 来 创建 符号 。 以 下 代码 创建 了 first 符号 值 。 







































































const first = Symbol() 





可 以 用 new 关键 字 来 调用 Number 和 String， 但 new 和 符号 一 起 使 用 时 会 抛 出 TypeError 异 
常 。 这 样 能 够 避免 类 似 new Number(3) !== Number(3) 的 错误 和 混 涌 行为。 以 下 代码 展示 了 
错误 信息 。 
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const oops = new SymbolL() 
// <- TypeError, Symbol is not a constructor 


为 了 便于 调试 ， 我 们 可 以 在 创建 符号 时 添加 一 些 描述 或 说 明 。 
Const mystery = Symbol('my symbol') 


与 数值 或 字符 串 一 样 ， 符 号 值 是 不 可 变 的 。 然 而 ， 与 另 两 种 值 类 型 不 同 ， 符 号 值 是 独 一 无 
二 的 。 描 述 并 不 会 影响 符号 值 的 唯一 性 ， 如 下 所 示 。 使 用 相同 描述 创建 的 符号 值 仍然 是 唯 
一 的 ， 互 不 相等 。 














console.log(Number(3) === Number(3)) 

// <- true 

console.log(Symbol() === Symbol()) 

// <- false 

console.log(Symbol('my symbol') === Symbol('my symbol')) 
// <- false 





符号 的 typeof 结果 为 symbol， 这 是 ES6 中 新 增 的 ， 如 下 所 示 。 


console.log(typeof Symbol()) 


// <- 'symbol' 
console.log(typeof Symbol('my symbol')) 
// <- 'symbol' 











符号 可 以 用 作对 象 的 属性 名 。 我 们 可 以 使 用 可 计算 属性 直接 将 名 为 weapon 的 符号 值 添 加 到 
character 对 象 中 ， 如 下 所 示 。 此 外 ， 为 了 访问 对 应 的 符号 属性 ， 我 们 需要 保存 创建 属性 
的 符号 值 的 引用 。 





























const weapon = Symbol( 'weapon') 
const character = { 

name: 'Penguin', 

[weapon]: 'umbrella' 


console.log(character [weapon]) 
// <- 'umbrella’ 


记 住 ， 从 对 象 中 读 取 属性 名 的 传统 方法 无 法 获取 符号 类 型 的 属性 名 。 以 下 代码 表明 ，for. 
in、0bject.keys 和 0bject.getOwnPropertyNames 均 无 法 获取 符号 属性 。 











for (Let key in character) { 
console. log(key) 
// <- 'name' 


console.log(Object.keys(character)) 

// <- ['name'] 

console.log(Object .getOwnPropertyNames(character)) 
// <- ['name'] 


这 一 表现 意味 着 ES6 前 的 代码 不 会 因为 符号 而 出 问题 。 同 样 ， 符 号 属性 也 不 会 出 现在 对 象 
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JSON 字符 串 化 的 结果 中 ， 如 下 所 示 。 


console.log(JSON.stringify(character)) 
// <- '{"name":"Penguin"}’ 





虽说 如 此 ， 但 符号 并 不 是 一 种 用 于 隐藏 属性 的 安全 机 制 。 虽 然 使 用 反射 和 序列 化 方法 时 不 
会 出 现 符号 属性 ， 但 可 以 通过 专 有 的 方法 获取 到 符号 ， 如 下 所 示 。 换 句 话说， 符号 并 非 不 
可 枚 举 ， 只 是 简单 地 隐藏 了 。 我 们 可 以 通过 0bject.getOwnPropertysymbols 获取 给 定 对 象 
中 所 有 用 作 属 性 名 的 符号 值 。 

















console.log(Object.getOwnPropertySymbols(character)) 
// <- [Symbol(weapon)] 








现在 我 们 已 经 知道 符号 的 工作 原理 了 ， 那 么 应 该 如 何 使 用 它 呢 ? 


3.2.2 ”符号 的 实际 用 法 

JavaScript 库 可 以 用 符号 将 对 象 映射 到 DOM 元 素 ， 例 如 ， 将 日 历 的 API 对 象 关联 到 DOM 
元 素 。 在 ES6 问世 前 ， 并 没有 很 好 的 方式 可 以 将 DOM 元 素 映 射 到 对 象 。 我 们 可 以 在 
DOM 元 素 上 添加 一 个 指向 API 的 属性 ， 但 这 么 做 会 污染 DOM 元 素 ， 因 此 并 不 是 一 种 良 
好 方式 。 同 时 ， 要 小 心 使 用 其 他 库 不 会 使 用 的 属性 ， 甚 至 语言 本 身 将 来 也 可 能 不 会 使 用 的 
属性 。 这 样 做 还 需要 建立 一 个 包含 所 有 DOM/API 条 目的 数组 查找 表 。 在 长 时 间 运 行 的 应 
用 中 ， 数 组 查找 表 会 变 得 越 来 越 大 ， 查 询 的 速度 也 会 越 来 越 慢 。 


使 用 符号 作为 属性 就 不 会 存在 这 个 问题 。 不 用 担心 与 将 来 的 语言 特性 发 生 冲 突 ， 因 为 符号 
值 是 唯一 的 。 以 下 代码 使 用 了 符号 将 DOM 元 素 映 射 到 日 历 API 对 象 中 。 



































const cache = SymbolL('caLendar ' ) 
function createCaLendar(eL) { 
if (cache in el) { // 检测 Symbol 值 cache 是 否 存在 于 el 元 素 中 
return el[cache] // 直接 使 用 cache， 避 免 重 新 实例 化 
} 
const api = eL[cache] = { 


// 在 这 里 编写 日 历 API 








return api 


} 
ES6 中 内 置 的 WeekMap 可 以 将 对 象 映射 到 其 他 对 象 ， 且 不 需要 借助 数组 或 在 所 有 对 应 对 象 
上 添加 额外 的 属性 。 与 数组 查找 表 不 同 ，WeakMap 查询 的 时 间 复 杂 度 是 常量 O(1)。 第 5 章 
将 介绍 WeakMap 以 及 其 他 一 系列 ES6 内 置 对 象 。 
































用 符号 定义 协议 
前 面 说 过 符号 可 以 用 来 定义 协议 。 协 议 是 一 种 定义 行为 的 通信 契约 或 约定 。 更 具体 来 说 ， 














如 果 一 个 库 使 用 一 个 符号 值 ， 那 么 遵循 这 个 库 约定 的 对 象 也 能 够 使 用 这 个 符号 值 。 
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思考 以 下 代码 ， 我 们 使 用 toJSON 方法 来 决定 对 象 通过 JSON.stringify 序列 化 的 结果 。 从 
结果 可 以 看 出 ，character 对 象 字 符 串 化 的 结果 是 toJSON 方法 返回 的 对 象 序列 化 后 的 结果 。 























Const character = { 
name: 'Thor ' ， 
toJSON: () => ({ 

key: "valLue' 


}) 


console.log(JSON.stringify(character)) 
// 人 '"{"key":"value"}"! 


相反 ， 如 果 toJSON 不 是 函数 ， 那 么 原始 的 character 对 象 会 被 序列 化 ， 包 括 toJSON 属 ! 
如 下 所 示 。 之 所 以 存在 这 种 不 一 致 性 ， 是 因为 依赖 常规 属性 来 定义 行为 。 


下 




















const character = { 
name: 'Thor’', 
toJSON: true 


} 
console.log(JSON.stringify(character)) 
// <- '"{"name":"Thor","toJSON":true}"' 


使 用 符号 来 实现 toJSON 会 更 好 ， 因 为 这 样 就 不 会 与 其 他 对 象 属性 名 产生 冲突 。 因 为 符号 是 
唯一 的 、 不 会 被 序列 化 ， 且 除了 显 式 调用 0bject.getOwnPropertysymbols 外 不 会 暴露 ， 所 
以 符号 很 适合 对 象 用 来 定义 自己 的 序列 化 逻辑 ， 然 后 通过 JSON.stringify 输出 。 以 下 代码 
用 符号 来 定义 stringify 国 数 的 序列 化 行为 ， 我 们 可 以 将 其 当 作 一 种 替代 方案 。 








const json = Symbol('alternative to toJSON') 
const character = { 
name: "Thor ' ， 
[json]: () => ({ 
key: "valLue' 


}) 


stringify(character) 
function stringify(target) { 
if (json in target) { 
return JSON.stringify(target[json]()) 


return JSON.stringify(target) 
} 


要 想 用 符号 值 定义 json 行为 ,需要 在 对 象 字面 量 中 使 用 可 计算 属性 名 。 这 样 还 可 以 确保 该 
行为 不 会 与 用 户 定义 的 其 他 属性 发 生 冲 突 ， 将 来 也 不 会 与 无 法 预见 的 语言 特性 发 生 冲突 。 
此 外 ， 必 须 能 够 在 stringify 函数 中 访问 符号 值 json， 这 样 才 能 自 定义 行为 。 我 们 可 以 通 
过 一 行 代 码 就 将 符号 值 json 暴露 给 stringify 函数 ， 如 下 所 示 。 这 也 将 stringify 与 改变 
其 行为 的 符号 值 绑 定 在 一 起 了 。 












































stringify.as = json 
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邮 


暴露 stringify 国 数 也 就 暴露 了 符号 值 stringify.as。 这 样 用 户 就 可 以 使 用 自 定义 符号 简 
单 修改 对 象 ， 从 而 调整 stringify 的 行为 。 











与 向 stringify 国 数 传人 可 选 参数 截然 不 同 ， 使 用 符号 描述 行为 没有 以 下 问题 。 首 先 ， 向 
函数 添加 可 选 参数 会 影响 其 公共 API， 而 修改 函数 的 内 部 实现 以 支持 符号 并 不 会 影响 公共 
API。 使 用 options 对 象 传 人 不 同 的 属性 会 好 一 些 ， 但 每 调用 一 次 函数 就 传人 一 个 options 
对 象 并 不 方便 。 


使 用 符号 定义 行为 还 有 以 下 好 处 : 只 要 修改 符号 属性 值 或 利用 了 该 行为 的 代码 ， 就 能 增强 
或 修改 对 象 的 行为 。 此 外 ， 使 用 符号 作为 属性 无 须 担 心 与 语言 的 新 特性 发 生 冲 突 。 


除了 本 地 符号 ， 还 有 一 些 全 局 注册 的 符号 ， 整 个 代码 域内 都 能 访问 这 些 值 。 我 们 来 一 起 看 
看 具体 有 哪些 。 




















3.2.3 全 局 符号 注册 表 

代码 域 是 指 任何 一 种 JavaScript 执行 上 下 文 ， 如 应 用 所 在 页 面 、 页 面 中 的 <iframe>、 通 过 
eval 执行 的 脚本 ， 以 及 各 类 worker' (如 Web worker、service worker 和 shared worker)。 这 
些 执行 上 下 文 都 有 自己 独 有 的 全 局 对 象 。 例 如 ， 定 义 在 页 面 的 window 对 象 上 的 全 局 变量 不 
可 在 ServiceWorker 中 使 用 。 不 过 ， 全 局 符号 注册 表 在 所 有 代码 域 中 是 共享 的 。 






































以 下 两 种 方法 可 以 访问 运行 环境 下 的 全 局 符号 注册 表 : Symbol.for 和 Symbol.keyFor。 我 们 
来 看 看 它们 的 用 途 。 


1. Symbol.for(key) 
Symbol.for(key) 可 以 用 来 查找 运行 环境 下 的 全 局 符号 注册 表 中 的 key 值 。 如 果 全 局 注册 表 
中 存在 所 传 入 key 对 应 的 符号 值 ， 则 返回 该 值 。 如 果 不 存 在 ， 则 用 传 入 的 key 新 建 一 个 并 
在 全 局 注册 。 也 就 是 说 ，Symbol.for(key) 是 寡 等 的 : 使 用 给 定 的 key 查找 符号 值 ， 如 果 没 
有 ， 则 创建 一 个 并 返回 。 






































在 以 下 代码 段 中 ， 对 Symbol.for 的 第 一 个 调用 创建 了 一 个 标识 为 'example' 的 符号 值 ， 并 
将 其 加 入 了 全 局 注册 表 中 ， 然 后 返回 。 第 二 个 调用 返回 了 同一 个 符号 值 ， 因 为 该 key 值 已 
经 在 注册 表 中 ， 返 回 值 等 于 前 一 个 符号 值 。 


























const example = Symbol.for('example') 
console.log(example === Symbol.for('example')) 
// <- true 


全 局 注册 表 通 过 key 保存 符号 。 注 意 ， 当 符号 被 创建 并 添加 到 全 局 注册 表 时 ，key 会 用 作 








注 1: worker 是 在 浏览 器 中 执行 后 台 任 务 的 一 种 方式 。 即 使 在 不 同 的 执行 上 下 文中 ， 启 动 程序 也 可 以 通过 
消息 与 其 worker 通信 。 
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它 的 描述 。 试 想 一 下 ， 这 些 符号 值 是 全 局 可 用 的 ， 如 果 想 要 减少 潜在 的 命名 冲突 ， 就 需要 
给 符号 的 key 添加 前 级 ， 以 标识 库 和 组 件 。 





2. Symbol.keyFor(symbol) 
Symbol.keyFor(symbol) 能 够 返回 一 个 符号 类 型 的 符号 值 在 添加 到 全 局 注册 表 时 所 关联 的 
key。 以 下 示例 展示 了 这 一 用 法 。 





const example = Symbol.for('example') 
console.log(Symbol .keyFor (example)) 
// <- 'example’ 




















注意 ， 如 果 给 定 的 符号 值 不 在 全 局 注册 表 中 ， 那 么 该 方法 会 返回 undefined。 





console.log(Symbol.keyFor(Symbol())) 
// <- undefined 














因为 本 地 符号 值 并 不 是 全 局 注册 的 一 部 分 ， 如 下 所 示 。 


const example = Symbol.for('example') 
console. log(Symbol.keyFor(Symbol('example'))) 
// <- undefined 














到 目前 为 止 ， 我 们 已 经 学 习 了 有 关 全 局 注册 表 的 API， 接 下 来 我 们 再 看 一 些 注 意 事项 。 


3. 最 佳 实践 与 注意 事项 

全 局 注册 表意 味 着 整个 代码 域内 都 可 以 访问 符号 值 。 全 局 注册 表 在 任何 代码 域内 返回 的 都 
是 同一 个 对 象 的 引用 。 在 以 下 示例 中 ，Symbol.for API 在 页 面 和 <iframe> 中 返回 的 是 同一 
个 符号 值 。 









































const d = document 

const frame = d.body.appendChild(d.createElement('iframe')) 
const framed = frame.contentWindow 

const si1 = window.Symbol.for('example') 

const s2 = framed.Symbol.for('example') 

console.log(s1 === s2) 

// <- true 














使 用 全 局 可 用 的 符号 值 时 需要 做 好 权衡 。 一 方面 ， 全 局 符号 使 得 类 库 能 够 方便 地 暴露 其 中 
的 符号 值 ， 另 一 方面 ， 类 库 也 可 能 会 使 用 本 地 符号 在 其 API 上 暴露 符号 值 。 显 然 ， 当 符号 
需要 在 任意 两 个 代码 作用 域 (如 ServiceWorker 和 Web 页 面 ) 共享 时 ， 全 局 符号 注册 表 就 
非常 有 用 了 。 同 时 ， 使 用 全 局 符号 注册 表 的 API 可 以 不 必 存 储 符号 值 的 引用 ， 因 为 同一 个 
给 定 的 key 值 会 返回 相同 的 符号 值 。 记 住 ， 虽然 这 些 符号 值 在 整个 运行 环境 均 可 用 ,但 使 
用 each 或 contains 这 样 的 通用 符号 值 可 能 会 产生 意 想不到 的 后 果 。 


此 外 ， 还 有 另 一 种 符号 值 ， 众 所 周知 的 内 置 符号 。 






























































大 
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3.2.4 众所周知 的 符号 
前 面 我 们 已 经 讨论 了 如 何 用 Symbolt 函数 和 SymbolL.for 创建 符号 值 。 接 下 来 我 们 将 讨论 第 
三 种 ， 也 是 最 后 一 种 符号 : 众所周知 的 符号 。 这 些 符号 值 是 语言 自 带 的 ， 而 不 是 开发 者 自 
己 创建 的 ， 它 们 提供 了 内 部 语言 行为 的 钧 子 ， 允 许 我 们 扩展 或 定制 ES6 问世 前 无 法 操作 的 
某 些 内 部 逻辑 。 

众所周知 的 符号 能 够 在 不 破坏 现 有 代码 的 情况 下 扩展 语言 ，Symbol.toPrimitive 就 是 一 个 很 
好 的 示例 。 可 以 将 一 个 函数 赋 给 它 ， 该 函数 将 决定 对 象 如 何 转 换 成 基本 值 。 函 数 接受 一 个 
可 以 为 'string'、'number' 或 者 'default' 的 hint 参数 ， 以 指定 所 要 转换 成 的 初始 类 型 。 
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const morphling = { 
[Symbol.toprimitive](hint) { 
if (hint === "number') { 
return Infinity 


} 
if (hint === 'string') { 
return 'a Lot' 
} 
return '[object Morphling]' 
} 

} 
console.log(+morphling) 
// <- Infinity 
console.log( ‘That is ${ morphling }!°*) 
// <- 'That is a Lotl! 
console.log(morphling + ' is powerful') 
// <- '[object Morphling] is powerful' 


另 一 个 示例 是 Symbol.match。 如 果 将 一 个 正则 表达 式 的 Symbol.match 属性 设 为 false， 当 
传 入 .startswith、.endsWith 或 者 .includes 时 ， 该 正则 表达 式 会 被 当 作 字符 串 字 面 量 。 
这 三 个 方法 是 ES6 中 新 增 的 字符 串 方 法 。.startsWith 用 于 判断 字符 串 是 否 以 另 一 个 字符 
串 开 头 。.endsNith 表明 字符 串 是 否 以 另 一 个 字符 串 结尾 。.incLudes 方法 用 于 判断 字符 串 
是 否 包含 另 一 个 字符 串 ， 如 果 是 ， 则 返回 true。 以 下 代码 段 通过 SymbolL.match 将 正则 表达 
式 变 成 了 字符 串 形 式 ， 并 将 甚 与 字符 串 进行 比较 。 

const text = '/an example string/' 

const regex = /an example string/ 

regex[Symbol.match] = false 


console.log(text.startsWith(regex)) 
// <- true 
































如 果 没 有 通过 Symbol.match 修改 正则 表达 式 ， 那 么 .startsWith 会 抛 出 异常 ， 因 为 该 方法 
期 望 接受 一 个 字符 串 参数 ， 而 不 是 正则 表达 式 。 


跨 代 码 域 共 享 但 不 在 全 局 注册 表 中 
众所周知 的 符号 跨 代码 域 共享 。 以 下 代码 表明 ， 当 前 窗口 中 的 Symbol.iterator 和 <iframe> 
窗口 中 的 引用 相同 。 
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const frame = document.createElement('iframe') 

document .body.appendChiLd(frame) 

SymbolL.iterator === frame.contentWindow.Symbol.iterator 
// <- true 


需要 注意 的 是 ， 虽 然 众所周知 的 符号 可 以 跨 代 码 域 共享 ， 但 它们 并 不 在 全 局 注册 表 中 。 以 
下 代码 表明 ， 使 用 Symbol.iterator 作为 key 在 注册 表 中 查询 时 ， 得 到 的 值 为 undefined。 
这 表明 该 符号 值 并 不 在 全 局 注册 表 中 。 


console.log(Symbol.keyFor(Symbol.iterator)) 
// <- undefined 











Symbol.iterator 是 最 有 用 的 众所周知 的 符号 之 一 。 在 任意 对 象 上 使 用 该 符号 定义 一 个 函数 
可 以 在 不 同 的 语言 结构 上 迭代 序列 。 下 一 章 将 深入 讨论 symbot,iterator， 并 将 其 与 迭代 器 
和 迭代 协议 一 起 广泛 使 用 。 


3.3 ”对 象 的 内 置 改进 


第 2 章 中 介绍 了 对 象 字 面 量 的 语法 方面 的 改进 ， 并 设 有 提 及 一 些 内 置 的 0bject 静态 方法 。 
现在 我 们 来 看 看 这 些 方法 。 



































除了 前 面 提 到 的 0bject.getOwnPropertySymbols, 还 有 0bject.assign、 0bject.is 和 0bject. 
setPrototypeOf, 


3.3.1 使 用 0bject.assign 扩 展 对 和 象 
为 配置 对 象 设 置 默认 值 是 再 常见 不 过 的 事情 。 通 常 来 说 ， 类 库 和 设计 良好 的 组 件 接口 都 有 
合理 的 缺 省 值 ， 以 满足 最 频繁 的 使 用 场景 。 




















例如 ， 一 个 Markdown 类 库 只 要 提供 一 个 input 参数 就 可 以 将 Markdown 转 为 HTML。 只 
进行 Markdown 解析 是 最 常用 的 使 用 场景 ， 因 此 类 库 不 要 求 使 用 者 提供 其 他 任何 选项 。 但 
是 类 库 可 能 会 支持 一 些 不 同 的 选项 ， 以 调整 解析 行为 。 这 些 选 项 可 能 是 允许 <script> 或 
<iframe> 标签 的 选项 、 在 代码 块 中 用 CSS 高 亮 关 键 字 的 选项 。 


试想 一 下 ， 我 们 需要 提供 以 下 这 些 默认 值 。 


const defaults = { 
scripts: false, 
iframes: false, 
highlightSyntax: true 




















其 中 一 种 方式 是 通过 解构 将 defaults 对 象 设 为 options 参数 的 默认 值 。 这 种 情况 下 ， 当 想 
要 设置 选项 时 ， 用 户 必 须 为 每 个 选项 提供 值 。 











function md(input, options=defaults) { 


} 


因此 ， 上 默认 值 必须 以 某 种 方式 与 用 户 提供 的 配置 合并 。0bject.assign 能 够 进行 这 一 合并 操 
作 ， 如 下 所 示 。 第 一 个 参数 为 空 对 象 们 ， 第 二 个 参数 defautt 中 的 值 会 复制 到 空 对 象 中 ， 
然后 再 复制 options， 最 终 返 回 改变 后 的 空 对 象 。 这 样 config 对 象 中 就 会 有 所 有 的 默认 值 
以 及 用 户 提供 的 配置 。 















































function md(input, options) { 
const config = Object.assign({}, defaults, options) 


} 





理解 0bject.assign 的 目标 
0bject.assign 函数 会 改变 它 的 第 一 个 参数 。 参 数 格式 是 (target，.. .sources)。 每 个 
源 对 象 都 会 应 用 到 目标 对 象 上 ， 源 对 象 依次 应 用 ， 源 对 象 中 的 属性 依次 应 用 。 


思考 以 下 场景 ， 相 较 于 在 0bject.assign 中 传递 一 个 空 对 象 作为 第 一 个 参数 ， 我 们 直 
接 传 入 了 defaults 和 options。 这 样 会 改变 defaults 对 象 的 内 容 ， 由 于 0bject.assign 
会 改变 第 一 个 对 象 ， 这 一 过 程 会 导致 defaults 中 的 部 分 默认 值 丢失 ， 并 额外 增加 一 些 
错误 的 默认 值 。 首 次 调用 函数 nd 得 到 的 结果 与 上 例 中 的 结果 相同 ， 但 它 在 该 过 程 中 改 
变 了 defauLts， 从 而 影响 了 后 续 的 调用 。 

function md(input, options) { 


const config = Object.assign(defaults, options) 


} 


因此 ， 最 好 每 次 调用 0bject.assign 时 都 传 入 一 个 全 新 的 对 象 作为 第 一 个 参数 。 











对 于 有 默认 值 的 任意 属性 ， 如 果 用 户 提供 了 新 的 值 ， 则 以 用 户 提供 的 值 为 准 。0bject. 
assign 的 工作 原理 如 下 所 述 。 首 先 ，0bject.assign 获取 传人 的 第 一 个 参数 ， 我 们 可 以 称 
其 为 target;， 然后 获取 其 他 参数 ， 我 们 称 其 为 sources。 对 于 sources 中 的 每 一 个 源 对 象 ， 
其 中 所 有 的 属性 值 都 会 被 遍历 并 赋 给 target 对 象 。 最 终 ， 最 后 一 个 源 对 象 (以 下 示例 中 为 
options 对 象 ) 会 重 写 前 面 的 赋值 ， 具 体 代码 如 下 所 示 。 
const defaults = { 
first: 'first', 


second: 'second ' 


} 
function applyDefaults(options) { 


return Object.assign({}, defaults, options) 















































} 

applyDefaults() 

// <- { first: 'first', second: 'second' } 
applyDefaults({ third: 3 }) 

// <- { first: 'first', second: 'second', third: 3 } 
applyDefaults({ second: false }) 

// <- { first: 'first', second: false } 
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该 语言 中 还 没有 0bject.assign 时 ， 这 个 功能 在 用 户 间 有 很 多 相似 的 实现 方式 ， 有 具体 名 称 
有 assign 或 extend 等 。0bject.assign 方法 统一 了 这 些 可 选 方案 。 








需要 注意 的 是 ，0bject.assign 只 会 遍历 自身 可 数 的 属性 ， 其 中 包括 字符 串 和 符号 属性 。 





Const defaults = { 
[Symbol('currency')]: 'USD 


const options = { 
price: "0.99， 

} 

Object.defineProperty(options, 'name', { 
vaLue: 'Espresso Shot', 
enumerable: false 


}) 
console.log(Object.assign({}, defaults, options)) 
// <- { [Symbol('currency')]: 'USD', price: '0.99' } 


然而 ，0bject.assign 并 不 能 照顾 到 每 一 种 需求 。 很 多 用 户 间 的 实现 方法 能 够 支持 深度 赋 
值 ， 但 0bject.assign 并 不 会 递归 对 象 。 值 为 对 象 的 属性 会 直接 赋 给 target， 而 不 会 被 递 
归 赋 值 。 


在 以 下 示例 中 ， 你 可 以 期 望 f 属性 被 添加 到 target.a 上 ， 同 时 b.c 和 b.d 原封 不 动 ， 但 使 
用 0bject.assign 上 时，b.c 和 b.d 则 会 丢失 。 





























Object.assign({}, { a: {b: 'c',d: 'e' }},{a:{f:'g' }}) 
//<- {a:{f:'g'}} 
数组 也 不 会 被 特别 对 待 。 如 果 你 期 待 bbject.assign 能 够 进行 递归 ， 那 么 以 下 示例 
结果 就 会 出 平 你 的 意料 ， 你 所 期 待 的 'd' 并 不 会 出 现在 结果 数组 的 第 三 个 位 置 上 。 
Object.assign({}, {a: ['b', 'c', 'd'] }, {a: ['e', 'f'] }) 
//<- {a: ['e', 'f'] } 
撰写 本 书 时 有 一 个 处 于 阶段 3 的 ECMAScript 提案 *， 该 提案 实现 了 在 对 象 中 进行 扩展 ， 这 
与 在 数组 中 扩展 可 遍历 对 象 相似 。 在 一 个 对 象 中 扩展 另 一 个 对 象 与 0bject.assign 函数 的 
调用 效果 等 价 。 


以 下 代码 展示 了 在 对 象 中 扩展 另 一 个 对 象 的 用 法 ， 并 给 出 了 0bject.assign 方式 作为 对 比 。 
正如 你 看 到 的 ， 使 用 对 象 扩展 更 加 简洁 ， 情 况 允 许 时 ， 应 该 优先 选择 该 方式 。 




















const grocery ={ ...details } 

// Object.assign({}, details) 

const grocery = { type: 'fruit', ...details } 

// Object.assign({ type: 'fruit' }, details) 

const grocery = { type: 'fruit', ...details, ...fruit } 
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// Object.assign({ type: 'fruit' }, details, fruit) 
const grocery = { type: 'fruit', ...details, color: 'red' } 
// Object.assign({ type: 'fruit' }, details, { color: 'red' }) 


与 对 象 扩展 对 应 ， 该 提案 还 包含 对 象 剩余 属性 ， 这 与 数组 中 的 剩余 参数 模式 相似 。 我 们 可 

以 在 解构 对 象 时 使 用 对 象 剩余 属性 。 

以 下 示例 表明 ， 我 们 可 以 使 用 对 象 剩余 属性 得 到 一 个 对 象 ， 该 对 象 只 包含 未 在 参数 列表 
| 


中 显 式 指 明 的 属性 。 注 意 ， 与 数组 剩余 参数 模式 相同 ， 对 象 剩余 属性 只 能 位 于 解构 的 最 
后 位 置 。 




















const getUnknownProperties = ({ name, type, ...unknown }) => 
unknown 
getUnknownProperties({ 
name: "Carrot ' ， 
type: 'vegetable', 
color: "orange' 
}) 


// <- { color: 'orange' } 





在 变量 声明 语句 中 解构 对 象 时 ， 我 们 也 可 以 使 用 相似 的 方式 。 在 以 下 示例 中 ， 设 有 显 式 解 
构 的 每 个 属性 都 会 被 放 到 meta 对 象 中 。 








const { name, type, ...meta } = { 
name: 'Carrot', 
type: 'vegetable', 
color: "orange' 


} 

// <- name = 'Carrot' 

// <- type = 'vegetable' 

// <- meta = { color: 'orange' } 


第 9 章 将 深入 讨论 对 象 的 剩余 属性 与 扩展 。 


3.3.2 ”使 用 Object.is 进 行 对 象 比较 
0bject.is 方法 与 严格 相等 比较 运算 符 === 有 些 不 同 。 大 部 分 情况 下 ，0bject.is(a，b) 与 
a === b 等 价 。 但 是 有 两 种 情况 不 同 : NaN，-6 和 +0。 该 算法 在 ECMAScript 规范 中 被 称 为 


SameVatLue。 








当 NaN 和 NaN 比较 时 ， 严 格 相等 运算 符 会 返回 false， 因 为 NaN 不 等 于 它 自 身 。 但 是 0bject.is 
方法 则 会 返回 true。 











NaN === NaN 
// <- false 
Object.is(NaN, NaN) 
// <- true 
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类 似 地 ， 当 -9 与 +6 比较 时 ，=== 运算 符 得 到 的 结果 是 true， 但 0bject.is 返回 false。 


-0 === +0 

// <- true 
Object.is(-0, +0) 
// <- false 


这 些 差别 看 起 来 不 大 ， 但 由 于 NaN 有 一 些 独特 的 行为 ， 如 typeof NaN 的 结果 是 'number'， 
处 理 NaN 时 总 是 很 麻烦 ， 而 且 NaN 不 等 于 其 自身 。 











3.3.3 0bject.setPrototypeOf 


顾名思义 ，0bject.setPrototypeof 的 功能 是 设置 一 个 对 象 的 原型 引用 为 另 一 个 对 象 。 相 较 
于 使 用 遗留 特性 _proto_ 来 设置 原型 ， 更 推荐 使 用 Object.setPrototypeOf 。 








在 ES6 问世 前 ，ES5 引入 了 0bject.create。 我 们 可 以 使 用 该 方法 创建 一 个 新 的 对 象 ， 新 
对 象 以 传人 的 原型 参数 为 原型 ， 如 下 所 示 。 
const baseCat = { type: 'cat', legs: 4 } 


const cat = Object.create(baseCat) 
cat.name = 'Milanesita’ 





但 是 0bject.create 只 适用 于 创建 新 的 对 象 。 相 反 ， 我 们 可 以 使 用 0bject.setPrototypeof 
来 改变 已 有 对 象 的 原型 ， 如 下 所 示 。 





const baseCat = { type: 'cat', legs: 4 } 
const cat = 0bject.setPrototypeOf( 

{ name: 'Milanesita' }, 

baseCat 


) 





注意 ， 相 较 于 0bject.create， 使 用 Object.setPrototypeof 可 能 会 导致 很 多 性 能 问题 。 因 
此 ， 当 决定 在 整个 代码 库 中 使 用 object.setPrototypeof 时 ， 需 要 认真 考虑 。 




















性 能 问题 
使 用 Object.setPrototypeOf 修改 对 象 的 原型 是 很 耗费 性 能 的 操作 。 以 下 是 Mozilla 开 
发 者 网 络 文档 中 关于 此 事 的 说 法 。 


鉴于 现代 JavaScript 引擎 优化 属性 访问 的 特性 ， 在 任何 浏览 器 和 JavaScript 引 
学 中 修改 对 象 的 原型 都 是 一 个 很 慢 的 操作 。 对 于 改变 继承 的 性 能 的 影响 是 很 微 
妙 与 深远 的 ， 不 仅仅 是 obj._proto = ... 语 向 的 时 间 消 耗 ， 还 会 影响 那些 访 
问 原 型 被 改变 的 对 象 的 所 有 代码 。 如 果 比 较 在 意 性 能 ， 那 么 你 最 好 训 免 给 对 象 
设置 原型 。 相 反 ， 可 以 使 用 Object.create 创建 一 个 基于 期 望 原型 的 新 对 象 。 


一 一 Mozilla 开发 者 网 络 














3.4 ”装饰 器 


装饰 器 并 不 是 一 个 新 的 概念 。 在 现代 编程 语言 中 ， 这 种 模式 相当 普遍 : C# 中 有 特性 、Java 
中 称 其 为 注解 ，Python 中 则 称 之 为 装饰 器 ， 等 等 。TC39 pe i 的 提案 ”， 
现在 处 于 阶段 2。 








3.4.1 初 识 JavaScript 装 饰 器 
JavaScript 装饰 器 语法 与 Python 相似 。JavaScript 装饰 器 可 以 应 用 于 类 以 及 任何 静态 定义 的 
属性 ， 如 对 和 象 字面 量 或 类 声明 中 的 属性 ， 哪 怕 它 们 是 get/set 存 取 器 或 static 属性 。 


根据 该 提案 , 装饰 器 的 语法 是 @ 后 跟 一 系列 点 连接 的 标识 符 “ 以 及 一 个 可 选 参 数列 表 。 以 下 
是 一 些 示例 。 











。 Qdecorators.frozen 是 一 个 合法 装饰 器 。 

。 decorators.frozen(true) 是 一 个 合法 装饰 器 
。 decorators().frozen() 存在 语法 错误 。 

。 decorators[ 'frozen'] 存在 语法 错误 。 


类 声明 和 类 成 员 可 以 添加 0 到 多 个 装饰 器 


Qinanimate 
class Car {} 


@expensive 
@speed( 'fast') 
class Lamborghini extends Car {} 


class View { 
@throttle(200) // 最 多 每 200 毫 秒 核对 一 次 
reconcile() {} 


} 


装饰 器 是 通过 函数 实现 的 。 成 员 装 饰 器 函数 接受 成 员 描 述 符 并 返回 成 员 描 述 符 。 成 员 描 述 
符 与 属性 描述 符 相 似 ， 但 形式 不 同 。 以 下 即 为 装饰 器 提案 中 所 定义 的 成 员 描述 符 接口 。 可 
选 参数 finisher 国 数 接受 类 构造 国 数 ， 人 允许 我 们 执行 与 被 修饰 属性 所 在 类 相关 的 操作 。 

















interface MemberDescriptor { 
kind: "Property" 
key: string, 
isStatic: boolean, 
descriptor: PropertyDescriptor, 
extras?: MemberDescriptor[] 





主 3: 可 以 在 GitHub (https://mjavascript.com/out/decorators) 中 查看 该 草案 
注 4: 不 允许 通过 [] 访问 属性 ， 因 为 这 样 编译 器 会 难以 消除 语法 歧义 。 


一 
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finisher?: (constructor): void; 
} 
以 下 示例 定义 了 一 个 readonly 成 员 装 饰 器 函数 ， 从 而 将 被 装饰 的 成 员 状 态 变 为 不 可 写 。 借 
助 对 象 剩余 属性 与 对 象 扩展 操作 ， 我 们 可 以 将 属性 描述 符 修改 成 不 可 写 状态 ， 并 保持 其 余 
成 员 描述 符 不 变 。 




















function readonly({ descriptor, ...rest }) { 
return { 
atest 
descriptor: { 
.. .descriptor, 
writable: false 
} 
} 
} 


类 装饰 器 函数 接受 3 个 参数 : 被 装饰 的 类 构造 函数 ctor， 如 果 被 修饰 的 类 继承 了 其 他 类 ， 
则 包含 父 类 的 heritage; 带 有 被 修饰 类 的 成 员 描 述 符 列表 的 merbers 数组 。 


对 被 装饰 类 的 每 个 成 员 描 述 符 调用 上 述 readonly 成 员 装 饰 器 可 以 实现 类 级 的 readonLyMembers 
装饰 器 ， 如 下 所 示 。 





function readonlyMembers(ctor, heritage, members) { 
return members.map(member => readonly(member)) 


} 


3.4.2 ”装饰 器 又 加 及 不 变性 提醒 

为 避免 不 变性 问题 ， 你 可 能 会 试图 从 装饰 器 中 返回 一 个 新 的 属性 描述 符 ， 而 不 修改 原始 描 
述 符 。 虽 然 出 发 点 是 好 的 ， 但 可 能 会 产生 意 想不到 的 效果 ， 因 为 可 能 会 对 同一 个 类 或 类 成 
员 进 行 多 次 装饰 。 

如 果 代 码 中 有 装饰 器 未 考虑 自己 接受 的 descriptor 参数 而 直接 返回 一 个 全 新 的 
descriptor， 那 么 在 这 个 新 的 描述 符 返 回 之 前 ， 这 些 装饰 器 会 失去 之 前 的 所 有 修饰 。 























在 编写 装饰 器 时 ， 我 们 应 该 认真 对 待 接收 到 的 descriptor， 做 到 创建 并 返回 一 个 基于 所 给 
descriptor 原始 参数 的 descriptor 。 





3.4.3 用例: C# 中 的 特性 
很 久 以 前 ， 我 是 通过 开源 的 C# 项目 RunUO 中 编写 的 Ultima Online’ 服务 器 仿真 器 了 解 到 
C# 的 。RunUO 是 我 磁 到 过 的 最 好 的 项 目 之 一 ， 而 且 它 是 使 用 C# 实现 的 。 



































注 5: Ultima Online 是 一 款 几 十 年 前 的 基于 终极 宇宙 的 虚拟 角色 扮演 类 游戏 。 








大 
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他 们 将 服务 器 软件 拆 成 一 个 可 执行 文件 和 一 堆 .cs 文件 。runuo 执行 文件 会 在 运行 时 编译 这 
些 .cs 脚本 ， 并 将 它们 动态 混合 到 应 用 中 。 这 样 一 来 ， 只 要 能 修改 这 些 .cs 文件 的 脚本 就 行 
了 ， 用 不 着 VS (包括 msbuild) 或 其 他 东西 。 因 此 ，RunUO 成 为 了 新 手 的 完美 学 习 环 境 。 








RunUO 高 度 依赖 反射 。RunUO 的 开发 者 为 了 让 玩家 可 以 自己 定制 花 了 不 少 功夫 。 玩 家 不 
需要 研究 程序 就 能 改变 游戏 中 的 一 些 细节 ， 如 龙 的 火焰 能 够 造成 多 大 的 伤害 以 及 它 喷 射 
火球 的 频率 。 良 好 的 开发 体验 是 RunUO 设计 哲学 的 重点 。 复 制 一 些 怪物 文件 ， 使 其 继承 
Dragon 类 ， 重 写 几 个 属性 来 改变 它 的 色调 、 伤 害 输出 等 ， 就 可 以 创建 一 个 新 的 物种 。 


与 能 够 便捷 创建 新 的 怪物 或 非 玩家 角色 (游戏 中 的 倡 语 是 NPC) 一 样 ， 他 们 也 依赖 反射 为 
游戏 管理 员 提 供 功 能 。 管 理 员 可 以 在 游戏 内 运行 命令 ， 点 击 一 个 物品 或 怪物 来 查看 或 改变 
属性 ， 而 无 须 离开 游戏 ( 见 图 3-1)。 



























































图 3-1: 在 Ultima Online 客户 端 改变 RunUO 中 的 物品 (角色 ) 的 属性 


并 不 是 类 中 的 每 个 属性 都 可 以 在 游戏 内 进行 操作 。 有 些 属 性 仅 限于 内 部 使 用 ， 或 者 不 支持 
运行 时 编辑 。RunUO 有 一 个 CommandPropertyAttribute 装饰 器 “, 用 于 定义 属性 是 否 可 以 在 
游戏 内 编辑 ， 同 时 要 求 指定 读 操作 与 写 操作 所 需要 的 访 癌 级别。 这 个 装饰 器 在 RunUO 代 
码 中 几乎 随处 可 见 ”。 


playerMobile 类 用 来 控制 玩家 角色 如 何 工作 ， 它 非常 适合 作为 示例 来 说 明 这 些 特性 。 在 游 
戏 内 , PlayerMobile 有 很 多 属性 对 于 管理 员 和 审核 人 员 都 是 可 访问 的 *。 以 下 是 一 些 getter 
和 setter 属性 ， 但 只 有 第 一 个 应 用 了 CommandProperty 特性 ， 因 此 该 属性 在 游戏 中 对 游戏 
管理 者 来 说 是 可 访问 的 。 






































注 6: 可 以 在 RunUo 的 Git 仓库 (https://mjavascript.com/out/runuo-attributes) 中 查看 CommandPropertyAttribute 
注 7: CommandPropertyAttribute 在 整个 代码 库 中 广泛 使 用 ， 仅 在 RunUO 核心 中 就 标记 了 200 多 个 属性 。 
注 8: 可 以 在 PlayerMobile.cs 类 中 找到 许多 CommandProperty 属性 的 用 法 示例 。 
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[CommandProperty(AccessLeveL.GameMaster)] 
public int Profession 


{ 
get{ return m_Profession } 
set{ m_Profession = value } 


} 


public int StepsTaken 

{ 
get{ return m_StepsTaken } 
set{ m_StepsTaken = value } 


} 


C# 特性 和 JavaScript 装饰 器 的 一 个 有 趣 区 别 是 ，C# 中 的 反射 支持 使 用 MemberInfo# 
getCustomAttributes 从 对 象 中 提取 所 有 自 定义 的 属性 。 在 显示 允许 管理 员 查 看 或 修改 游戏 
中 物品 属性 的 对 话 框 时 ，RunUO 就 使 用 该 方法 提取 了 游戏 中 可 访问 的 每 个 属性 。 

















3.4.4 在 JavaScript 中 装饰 属性 
JavaScript 还 没有 从 对 象 上 获取 自 定义 属性 的 方法 ， 至 少 现 有 的 草案 中 还 没有 。 然 而 ， 
JavaScript 是 一 种 高 度 动态 的 语言 ， 创 建 这 种 “标签 ”并 不 麻烦 。 用 仅 对 管理 员 可 见 的 属 











class Dog { 
@commandProperty('game-master') 
Name; 


} 


与 C# 相 比 ，commandProperty 函数 要 稍微 复杂 一 点 。 由 于 此 时 的 JavaScript 装饰 器 没有 利 
用 反射 "， 我 们 需要 用 一 个 运行 时 符号 值 来 保存 任意 给 定 类 的 可 控制 属性 数组 。 





























function commandProperty(writeLevel, readLevel = writeLeveL) { 
return ({ key, ...rest }) => ({ 
key, 
Seest; 
finisher(ctor) { 
const symbol = Symbol.for('commandProperties') 
const commandPropertyDescriptor = { 
key, 
readLevel, 
writeLevel 


} 
if (!ctor[symbol]) { 
ctor[symbol] = [] 


ctor[symbol].push(commandPropertyDescriptor) 








注 9: 现代 JavaScript 还 没有 考虑 实现 JavaScript 装饰 器 的 反射 功能 ， 因 为 这 样 需要 引擎 在 内 存 中 存储 更 多 
的 元 数据 。 但 是 我 们 可 以 使 用 符号 和 列表 来 代替 使 用 原生 反射 。 





























和 
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} 
}) 
} 


只 要 有 需要 ，Dog 类 就 可 以 有 任意 数量 的 可 控制 属性 ， 并 且 这 些 属性 都 能 通过 一 个 符号 取 
得 。 我 们 可 以 使 用 以 下 函数 来 查找 给 定 类 的 可 控制 属性 ， 该 函数 通过 符号 获取 可 控制 的 属 


性 ， 


这 村 





例 。 





并 提供 默认 值 []， 而 且 返 回 原始 列表 的 副本 ,以 防 用 户 意 外 更 改 。 








function getCommandProperties(ctor) { 
const symbol = Symbol.for('commandProperties') 
const properties = ctor[symbol] || [] 
return [...properties] 
} 
getCommandProperties(Dog) 
// <- [{ key: 'name', readLevel: 'game-master ' ， 
// writeLeveL: 'game-master' }] 








羊 我 们 就 可 以 遍历 0 可 控制 属性 ， 并 在 运行 时 通过 简单 的 UI 呈现 这 些 属性 的 





编辑 界面 。 装 饰 器 最 适合 用 来 实现 这 种 将 某 些 属性 标记 出 来 ， 然 后 在 特定 场景 下 使 用 的 用 




















ee 如 维护 一 个 可 能 被 修改 的 列表 、 依 赖 时 不 时 会 失败 的 试探 ， 或 使 








用 某 种 严格 的 命名 约定 。 


下 一 





章 将 介绍 ES6 的 更 多 特性 ， 包 括 如 何 使 用 Promise 和 生成 器 进行 流程 控制 ， 以 及 如 何 


迭代 JavaScript 对 象 。 
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第 4 章 


迭代 与 流程 控制 





第 2 章 介 绍 了 ES6 中 的 基础 特性 ， 第 3 章 讨论 了 符号 ， 现 在 我 们 可 以 充满 信心 地 来 看 看 
Promise、 和 迭代 器 和 生成 器 了 。Promise 是 一 种 控制 异步 代码 流 的 新 方式 。 迭 代 器 定义 了 如 
何 迭 代 对 象 ， 并 通过 达 代 生成 值 序列 。 生 成 器 可 以 用 于 编写 看 似 同 步 实 则 在 后 台 异 步 工作 
的 代码 。 这 些 都 是 本 章 即 将 介绍 的 内 容 。 


本 章 先 从 Promise 讲 起 。 从 ES6 开始 ，Promise 成 为 了 JavaScript 原生 支持 的 特性 。 





4.1 Promise 


Promise 可 以 大 致 理解 为 “保存 着 一 个 未 来 可 用 的 值 的 代理 ”。 虽 然 可 以 在 Promise 中 编写 
同步 代码 ， 但 Promise 本 身 是 严格 按照 异步 方式 执行 的 。 掌 握 了 Promise， 就 可 以 轻 轻松 松 
地 实现 异步 逻辑 。 





























4.1.1 快速 理解 Promise 


为 了 理解 Promise， 我 们 先 来 看 一 个 在 浏览 器 中 使 用 fetch API 的 示例 。fetch 是 XMLHttpRequest 
的 简化 版 ， 旨 在 极 大 简化 发 送 HTTP 请求 的 操作 。 此 外 它 还 提供 了 可 扩展 的 API， 以 满足 
一 些 复杂 场景 的 应 用 ， 但 这 并 不 是 这 里 的 重点 。 简 单 来 说 ， 我 们 可 以 使 用 以 下 代码 发 送 一 
个 GET /items HTTP 请 求 。 





























fetch('/items') 
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这 条 fetch('items ' ) 语句 看 起 来 没什么 ， 它 只 会 通过 GET 方法 请 求 /items 资源 ， 然 后 就 什 
么 也 不 管 了 。 也 就 是 说 ， 无论 请 求 是 否 成 功 ， 都 不 会 响应。 重点 是 ，fetch 方法 返回 的 是 
一 个 Promise | 因此 ， 我 们 可 以 在 这 个 Promise 后 面 调用 .then 方法 ， 等 /items 资源 加 载 
完成 后 执行 一 个 回调 ， 并 给 回调 传 入 响应 对 象 response 作为 参数 。 


























fetch('" /items ' ) .then(response => { 
// 处 理 响 应 
}) 








以 下 代码 显示 浏览 器 已 经 基于 Promise API 实现 了 fetch。 调 用 fetch 会 返回 一 个 Promise 
对 象 。 与 事件 处 理 相 似 ， 在 Promise 中 使 用 .then 和 .catch 也 可 以 绑 定 若干 个 反应 函数 


(reaction ) 。 


const p = fetch('/items') 
p.then(res => { 
// 处 理 响应 
}) 
p.catch(err => { 
// 处 理 错 误 
}) 





传 入 .then 的 反应 函数 用 于 处 理 成 功 兑现 的 Promise， 通 常 是 一 个 值 ， 传 入 .catch 的 反应 
函数 会 接收 一 个 拒绝 理由 reason， 用 于 处 理 被 拒绝 的 Promise。 实 际 上 ， 我 们 也 可 以 直接 
将 处 理 拒绝 的 反应 函数 作为 第 二 个 参数 注册 到 .then 方法 中 ， 其 表达 的 意思 与 前 面 的 代码 
一 样 ， 如 下 所 示 。 























const p = fetch('/items') 
p.then( 
res => { 
// 处 理 响应 
Er => { 
// 处 理 错 误 
} 
) 


另 一 种 写法 是 省 略 .then(fulfillment，rejection) 中 的 况 现 反应 函数 ， 这 与 调用 .then 时 
省 略 拒绝 反应 函数 类 似 。.then(null，rejection) 等 价 于 .catch(rejection)， 如 下 所 示 。 


const p = fetch('/items') 
p.then(res => { 
// 处 理 响应 
}) 
p.then(null, err => { 
// 处 理 错 误 
}) 
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用 Promise 代替 回调 和 事件 


过 去 ， 在 Promise 出 现 之 前 ，JavaScript 一 直 依 赖 回调 实现 链 式 调用 。 如 果 前 面 示例 中 
fetch 要 求 传 入 回调 ， 那 必须 给 它 提供 一 个 fetch 操作 完成 后 调用 的 池 数 。Node.js 
给 采用 回调 形式 的 异步 代 三 树立 了 典范 ， 即 将 传 给 回调 函数 的 第 一 个 参数 保留 给 异步 
操作 期 间 殷 出 的 错误 对 旬 (可 能 有 ， 也 可 能 没有 )。 后 面 的 参数 可 以 用 于 读 取 异 步 操作 
的 结果 。 一 般 只 使 用 一 个 数据 参数 。 如 果 fetch 支持 回调 API， 则 可 以 按照 以 下 代码 
这 样 写 。 
fetch('/items', (err, res) => { 
if (err) { 
// 处 理 错误 
} else { 
| // 处 理 响 应 
}) 





如 果 还 没有 取得 /items 资源 ， 或 者 fetch 操作 没有 触发 错误 ， 那 么 这 个 回调 就 不 会 执 
0 注意 ， 这 种 方式 下 只 能 指定 一 个 回调 。 这 个 回 
调 要 负责 实现 接收 响应 后 的 所 有 逻辑 ， 这 些 事情 就 留 给 使 用 者 了 。 


除了 传统 的 回调 ， 另 一 种 API 设计 选择 是 事件 驱动 模型 。 这 种 模型 下 ， 我 们 可 以 在 
fetch 返回 的 对 象 上 注册 不 同事 件 的 回调 ， 每 个 事件 都 可 以 注册 任意 数量 的 事件 处 理 
器 ， 这 与 在 浏览 器 DOM 中 给 元 素 添 加 事件 监听 器 类 似 。 遇 到 错误 时 通常 会 触发 一 个 
error 事件 ; 在 相应 的 重要 时 刻 还 会 触发 其 他 事件 。 以 下 代码 展示 了 支持 基于 事件 的 
API 的 fetch 。 


fetch('/items') 
.on('error', err => { 
// 处 理 错 误 
}) 
.on('data', res => { 
// 处 理 响应 
}) 





为 不 同事 件 绑 定 多 个 监听 器 ， 可 以 解决 前 面 在 一 个 回调 函数 中 集中 处 理 所 有 后 续 远 辑 
的 问题 。 然 而 ， 事 件 的 回调 隙 数 不 方 便 连 级 起 来 或 在 另 一 个 异步 任务 兑现 时 触发 ， 
此 才 有 了 Promise。 不 仅 如 此 ， 事 件 更 适合 处 理 值 流 ， 不 太 适 合 我 们 讨论 的 场景 。 

节 将 深入 探讨 异步 代码 流程 设计 ， 包 括 哪 种 结构 适合 采用 哪 种 代码 流 。 








说 到 Promise， 连 绥 调 用 应 该 是 最 难 理解 的 。 在 基于 事件 的 API 中 ， 使 用 .on 方法 添加 事 
件 监听 器 ， 然 后 再 返回 事件 发 射 器 (emitter) 本 身 ， 就 可 以 实现 连续 注册 。Promise 不 一 
样 ， 它 的 .then 和 .catch 方法 每 次 都 返回 一 个 新 的 Promise 对 象 。 记 住 这 一 点 非常 重要 ， 
连 级 调用 的 结果 会 因 .then 和 .catch 添加 的 位 置 而 巡 然 不 同 ! 






























































可 视 化 Promise 链 : 困惑 之 源 
.then 和 .catch 方法 每 次 都 返回 一 个 新 的 Promise， 以 创建 一 个 类 似 树 形 的 结构 。 如 果 
有 两 个 Promise 一 一 pl1 和 p1.then 返回 的 p2， 则 pl 和 p2 这 两 个 节点 就 是 通过 p1.then 
的 反应 声 数 连接 的 。 反 应 未 数 负 责 创 建新 的 Promise， 并 将 其 以 自己 反应 的 Promise 子 
节点 的 身份 添加 到 树 中 。 
连 级 Promise 时 ， 需 要 理解 pl.then(r1).then(r2) 会 创建 两 个 新 的 Promise: p2 和 p3。 
第 二 个 反应 函数 r2 会 在 p2 兑现 时 触发 ， 而 r1 会 在 pl 兑现 时 触发 。 如 果 前 面 语 向 的 
写法 是 pl.then(r1); pl.then(r2)， 那 么 r1 和 r2 在 pl 兑现 时 会 同时 触发 。 如 果 pl 竞 
现 而 p2 未 兑现 ， 则 会 出 现 问题 。 
厘清 Promise 这 个 类 似 树 的 结构 链 是 理解 其 各 种 行为 的 关键 。 为 此 ， 我 创建 了 一 个 在 
线 工 具 Promisees， 用 于 可 视 化 地 展示 Promise 生成 的 树 结构 ， 如 图 4-1 所 示 。 















Var p » fetch(” ) 











1 

2 .then(res -> Conso’ rrorCerr)) 

3 .then(status ys.0. 

四 catch(err sole,errorCerr)) 

5 

6 p.then(stotus -> console,log(stotus)) @ 

7 ps ~ 4 

8 en ect nn NS then 

ee OOO@O@ ©@© 
19 then(() -> ne 

11 then(stotus ys)) -then() 

12 

13 p2.then(status us. ES 
14 p2.then(status u PENDING 





15 也 ,then(stotus 





Fulfillment 
function () 1{ 

return new Promise(function () {})); 
} 


图 4-1: Promisees 可 以 显示 代码 中 的 Promise 在 兑现 或 拒绝 之 后 的 树 形 结构 

















创建 Promise 需要 向 Promise 构造 函数 传人 一 个 解决 函数 (resolver)， 该 函数 接收 resolve 
和 reject 两 个 参数 ， 用 于 决定 何 时 以 及 如 何 处 理 创 建 的 Promise。 如 果 需 要 部 现 ， 则 调 
用 resolve 方 法; 如 果 需 要 拒绝 ， 则 调用 reject 方法 。 在 调用 这 两 个 方法 解决 Promise 
之 前 ，Promise 处 于 待定 状态 ， 此 时 任何 反应 函数 都 不 会 执行 。 以 下 代码 创建 了 一 个 新 的 


























Promise， 一 秒 后 再 根据 随机 值 决 定 以 兑现 还 是 拒绝 来 解决 它 。 





new Promise(function (resolve, reject) { 
setTimeout(function () { 
if (Math.random() > 0.5) { 
resoLve('random success') 
} elsef{ 
reject(new Error('random failure')) 


} 
}，1000) 
}) 





还 可 以 使 用 Promise.resolve 和 Promise.reject 来 创建 Promise。 这 两 个 方法 创建 的 Promise 
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会 分 别 以 一 个 兑现 的 值 和 一 个 拒绝 理由 立即 解决 。 


Promise 

.resolve({ result: 123 }) 

.then(data => console.log(data.result)) 
// <- 123 





如 果 Promise p 兑现 了 ， 那 么 通过 p.then 注册 的 反应 函数 会 执行 。 如 果 p 被 拒绝 了 ， 那 么 
通过 p.catch 注册 的 反应 函数 会 执行 。 根 据 反 应 函数 是 返回 一 个 值 、 一 个 Promise、 一 个 
Thenable， 还 是 抛 出 一 个 错误 ， 执 行 反 应 函数 会 相应 地 产生 三 种 结果 。 有 关 Thenable 的 内 容 
参见 4.1.3 节 ， 它 指 的 是 可 以 通过 Promise.resolve 转换 为 Promise 的 包含 then 方法 的 对 象 。 




















如 果 反 应 国 数 返 回 一 个 值 ， 则 .then 返回 的 Promise 会 以 该 值 部 现 。 这 种 情况 下 ， 多 个 
Promise 可 以 连 级 起 来 对 前 面 Promise 总 现 的 值 一 步 步 进行 转换 ， 如 下 所 示 。 





Promise 

.resolve(2) 

.then(x => x * 7) 

.then(x => x - 3) 

.then(x => console.log(x)) 
// <- 11 


如 果 反 应 函数 返回 一 个 Promise， 则 以 下 代码 中 的 第 一 个 .then 返回 的 Promise 会 被 阻塞 ， 
直到 它 的 反应 函数 返回 的 Promise 兑现 : 由 于 调用 了 setTimeout， 至 少 要 等 两 秒 。 





Promise 
.resolve(2) 
.then(x => new Promise(function (resoLve) { 
setTimeout(() => resolve(x * 1000), x * 1000) 
})) 
.then(x => console.log(x)) 
// <- 2000 








如 果 反 应 函数 抛 出 一 个 错误 ， 那 么 会 导致 .then 返回 的 Promise 被 拒绝 ， 进 而 转向 .catch 
分 支 ， 以 抛 出 的 错误 对 和 象 作 为 拒绝 理由 。 以 下 代码 为 fetch 添加 了 一 个 兑现 反应 函数。 一 
旦 fetch 操作 兑现 ， 它 就 会 抛 出 一 个 错误 ， 导 致 注册 到 .then 返回 的 Promise 上 的 拒绝 反 
应 函数 执行 。 














const p = fetch('/items') 
.then(res => { throw new Error('unexpectedly') }) 
.Catch(err => console.error(err)) 


接 下 来 我 们 后 退 一 步 并 放 慢 脚步 ， 多 看 几 个 使 用 Promise 的 示例 。 


4.1.2 ”Promise 的 延续 与 连 组 
上 一 节 提 到 过 ， 每 个 .then 都 会 返回 自己 的 新 Promise， 因 此 可 以 连 级 无 数 个 .then。 那 么 
这 个 过 程 中 到 底 发 生 了 什么 ”如 何 正确 推断 Promise 的 执行 ? 发 生 错误 时 怎么 办 ? 
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当 一 个 Promise 的 解决 函数 中 发 生 错误 时 ， 我 们 可 以 用 p.catch 来 捕获 该 错误 ， 如 下 所 示 。 


new Promise((resolve, reject) => reject(new Error('oops'))) 
.Catch(err => console.error(err)) 


可 见 ， 如 果 人 解决 函数 调用 了 reject， 那 么 Promise 会 以 拒绝 来 解决 。 如 果 人 解决 函数 中 抛 出 
了 一 个 异常 ， 那 么 结果 也 一 样 ， 如 下 所 示 。 


new Promise((resolve, reject) => { throw new Error('oops') }) 
.Catch(err => console.error(err)) 


兑现 和 拒绝 反应 了 国 数 中 发 生 的 错误 会 导致 相同 的 结果 ， 即 有 一 个 Promise 会 被 拒绝 。 是 哪 
个 Promise 呢 ? 就 是 以 发 生 错误 的 反应 国 数 为 参数 的 .then 或 .catch 返回 的 那个 Promise。 
通过 代码 很 容易 说 明 这 一 点 。 
Promise 
.resolve(2) 


.then(x => { throw new Error('failed') }) 
.Catch(err => console.error(err)) 


将 前 面 代码 中 每 一 步 的 方法 调用 拆 解 为 变量 会 更 易 理 解 。 以 下 代码 说 明 ， 如 果 将 .catch 添 
加 给 pl， 则 无 法 捕获 .then 反应 函数 抛 出 的 错误 。 虽 然 pl 竞 现 了 ， 但 p2 (调用 p1.then 
得 到 的 另 一 个 Promise) 因 抛 出 的 错误 被 拒绝 了 。 只 有 将 拒绝 反应 函数 通过 .catch 添加 到 
p2， 才 能 捕获 这 个 错误 。 








const pl = Promise.resolve(2) 
const p2 = pl.then(x => { throw new Error('failed') }) 
Const p3 = p2.catch(err => console.error(err)) 





图 4-2 可 视 化 地 展示 了 和 树 形 的 Promise 调用 结构 。 可 以 看 出 ， 在 p2 节点 出 错 的 情况 下 ， 添 
加 给 pl 的 拒绝 反应 函数 得 不 到 消息 。 





0 [promisees.Courtesyofpom x 六 


© C a Secure https://bevacqua.github.io/promisoes) 交 国 业 : 





PromisEES - promise visualization playground for the adventurous 


1 const pl = new Promise(resolve => resolve(2)) 
2 const p2 » pl,then(x »> { throw new Error('foiled') }) 
3 const p3 = pl.cotch(err => console.error(err)) 
4 const p4 = p3.then(() => 'error was logged!') 
5 


© @ Fulfillnment 





function (x) { 
throw new Error( 'failed'); 
} 


图 4-2: 根据 Promise 连 缀 调用 的 树 形 结构 可 知 ， 拒 绝 反 应 函数 只 能 捕获 基于 Promise 的 代码 分 支 
上 的 错误 
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要 想 处 理 p2 的 错误 ， 必 须 将 反应 函数 注册 到 p2， 如 图 4-3 所 示 。 

















DO 。 门 promisees . Courtesy of pon) x Ee 
€ C Secure https://bevacqua.github,iolpromisees/ 人 加 多 ; 


PromisEES - promise visualization playground for the adventurous 


Const pl = new PromiseCresolve ~> resolve(2)) 
Const p2 = pl.then(x “> { throw new Error( failed’) }) 


const p3 = p2.catch(err => console.error(err)) 
Const p4 » p3.then(() “> ‘error ws logged!') 


Fulfillment 


ww Nm 


function (x) { 
throw new Error( "failed'); 





} 











图 4-3: 将 拒绝 处 理 器 注册 到 发 生 错 误 的 分 支 就 可 以 捕获 错误 了 


现在 我 们 知道 了 ， 在 注册 反应 函数 时 ， 搞 清楚 应 该 注册 到 哪个 Promise 很 重要 ， 因 为 这 关 
系 到 最 终 能 否 捕获 错误 。 需 要 注意 的 另 一 点 是 ， 只 要 Promise 链 中 有 未 捕获 的 错误 ， 那 么 
下 游 的 拒绝 处 理 器 总 能 捕获 到 它 。 以 下 示例 在 发 生 错 误 的 pz 和 注册 拒绝 反应 函数 的 p4 之 
间 插 入 了 一 个 .then 调用 。 在 p2 因 拒 绝 而 解决 后 ，p3 也 会 因 拒 绝 而 解决 ， 因 为 它 直 接 依 
赖 p2。 当 p3 因 拒 绝 而 解决 时 ，p4 上 注册 的 拒绝 处 理 器 就 会 执行 。 

















const p1 = Promise.resolve(2) 

const p2 = p1.then(x => { throw new Error('failed') }) 
const p3 = p2.then(x => x * 2) 

const p4 = p3.catch(err => console.error(err)) 


一 般 来 说 ， 此 时 的 p4 会 兑现 ， 因 为 .catch 拒绝 处 理 器 中 并 未 抛 出 错误 。 这 意味 着 ， 如 果 


p4.then 注册 了 兑现 处 理 器 ， 那 么 该 函数 就 会 继续 执行 。 以 下 示例 表明 ， 在 p3 成 功 解决 
后 ， 依 赖 它 的 p4 注册 的 免 现 处 理 器 会 执行 ， 并 在 浏览 器 控制 台 输出 相关 信息 。 





const p1 = Promise.resolve(2) 

const p2 = p1.then(x => { throw new Error('failed') }) 
const p3 = p2.catch(err => console.error(err)) 

const p4 = p3.then(() => console.log('crisis averted')) 


同样 ， 如 果 p3 拒绝 处 理 器 中 发 生 错 误 ， 我 们 也 可 以 用 .catch 来 捕获 它 。 以 下 示例 展示 了 
如 何 通 过 p3.catch 捕获 被 拒绝 的 p3 抛 出 的 异常 。 





const pi = Promise.resolve(2) 

const p2 = p1.then(x => { throw new Error('failed') }) 
const p3 = p2.catch(err => { throw new Error('oops') }) 
const p4 = p3.catch(err => console.error(err)) 





以 下 代码 会 打印 err ,message 一 次 ， 而 不 是 两 次 。 因 为 第 一 个 .catch 中 并 未 发 生 错误 ， 所 
以 它 后 面 的 拒绝 分 支 自然 不 会 执行 。 























fetch('/items') 
.then(res => res.a.prop.that.does.not.exist) 
.Catch(err => console.error(err.message)) 
.Catch(err => console.error(err.message)) 

// <- 'Cannot read property "prop" of undefined ' 





以 下 代码 倒是 会 打印 err.message 两 次 。 这 是 因为 我 们 将 .then 返回 的 Promise 保存 到 了 变 
量 p 中 ， 然 后 给 p 添加 了 两 个 .catch 反应 函数 。 前 面 代 码 中 的 第 二 个 .catch 会 捕获 第 一 
个 .catch 返回 的 Promise 中 的 错误 ， 而 以 下 示例 中 的 两 个 .catch 拒绝 处 理 器 响应 的 是 同 


一 个 Promise。 














const p = fetch('/items').then(res => 
res.a.prop.that.does.not.exist 

) 

p.catch(err => console.error(err.message)) 

p.catch(err => console.error(err.message)) 

// <- 'Cannot read property "prop" of undefined ' 

// <- 'Cannot read property "prop" of undefined ' 





可 以 看 到 ，Promise 是 可 以 任意 连 缀 的 。 正 如 前 面 看 到 的 ， 我 们 可 以 在 Promise 链 的 任何 一 
步 保 存 一 个 引用 ， 然 后 在 其 基础 上 连 缀 更 多 的 Promise。 这 也 是 理解 Promise 时 的 重要 一 点 。 





























接 下 来 我 们 以 下 面 的 代码 为 例 ， 逐 步 分 析 创 建 和 连 级 Promise 的 过 程 中 发 生 的 事情 。 我 们 
先 认真 看 看 以 下 代码 。 

















const p1 = fetch('/items') 

const p2 = pi1.then(res => res.a.prop.that.does.not.exist) 
const p3 = p2.catch(err => {}) 

const p4 = p3.catch(err => console.error(err.message)) 





以 下 列 出 了 前 面 代码 执行 时 发 生 了 什么 。 














(1) fetch 返回 一 个 新 的 Promise p1。 

(2) 如 果 p1 部 现 ， 则 p1.then 返回 一 个 新 的 Promise p2。 

(3) 如 果 p2 拒绝 ， 则 p2.catch 返回 一 个 新 的 Promise p3。 

(4) 如 果 p3 拒绝 ， 则 p3.catch 返回 一 个 新 的 Promise p4。 

(5) pl 部 现 ，pl.then 反应 国 数 执行 。 

(6) 接着 ， 由 于 pl.then 反应 函数 中 发 生 错误 ，p2 拒绝 。 

(7) 因为 p2 拒绝 ， 所 以 p2.catch 执行 ， 并 忽略 p2.then 分 支 (如果 有 的 话 )。 

(8) 因为 p2.catch 没有 发 生 错 误 或 返回 拒绝 的 Promise， 所 以 它 返 回 的 p3 兑现 。 
(9) 因为 p3 兑现 ， 所 以 p3.catch 会 被 忽略 ，p3.then 分 支 会 执行 (如 果 有 的 话 )。 
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我 们 应 该 将 Promise 的 调用 链 想 象 成 树 形 结构 。 再 次 强调 : 应 该 将 Promise 的 调用 链 想 象 
成 树 形 结构 '。 图 4-4 可 以 帮助 我 们 强化 这 个 认 知 。 








1 const pl = fetch('/items’) 

2 const p2 pi.then(res "> res.a.prop. .does.not.exist) 

3 const p3 » p2.catch(err 0) 

4 const p4 = p3.catch(err => console,error(err.message)) Fet ch() 人 
5 


图 4-4: 在 这 个 树 结构 中 ，p3 兑现 了 ， 因 为 它 没有 抛 出 异常 ， 也 没有 被 拒绝 。 为 此 ，p4 永远 不 会 走 
向 拒绝 分 支 ， 因 为 其 节点 兑现 了 

这 些 最 初 都 是 从 一 个 Promise 开始 的 ， 接 下 来 我 们 将 探讨 如 何 创 建 Promise。 然 后 给 Promise 

添加 .then 或 .catch 分 支 ， 再 给 每 个 分 支 添加 任意 数量 的 .then 或 .catch， 以 创建 新 分 支 。 

















4.1.3 创建 Promise 
我 们 已 经 知道 ， 可 以 通过 fetch、Promise.resolve、Promise.reject 或 Promise 构造 函数 


创建 Promise。 前 面 的 示例 主要 使 用 fetch。 接 下 来 我 们 看 看 其 他 三 种 方式 。 


我 们 可 以 使 用 new Promise(resolver) 创建 Promise， 其 中 resolver 参数 是 一 个 函数 ， 用 于 解决 
新 创建 的 Promise。resolver 会 接收 两 个 均 为 函数 的 参数 ， 一 个 叫 resolve， 另 一 个 员 reject。 





























以 下 代码 创建 的 两 个 Promise 分 别 以 兑现 和 拒绝 得 到 解决 。 第 一 个 Promise 兑现 时 使 用 了 值 
'result'， 第 二 个 Promise 由 一 个 Error 对 象 拒绝 ， 错 误 消 息 为 "reason ' ， 即 拒绝 的 理由 。 


new Promise(resolve => resolve('result')) 
new Promise((resolve, reject) => reject(new Error('reason'))) 


部 现 或 拒绝 Promise 时 不 返回 值 也 是 可 以 的 ， 但 没有 什么 意义 。 一 般 来 说 ， 竞 现 Promise 
时 都 要 返回 一 个 结果 ， 比 如 Ajax 调用 的 响应 ， 就 像 前 面 使 用 fetch 时 那样 。 如 果 拒 绝 
Promise， 那 一 定 要 给 出 拒绝 的 理由 ， 通常 要 将 这 个 理由 包装 在 Error 对 象 中 ， 以 便 上 报错 
误 ， 方便 排 错 。 


你 可 能 已 经 猜 到 了 ，Promise 的 解决 函数 并 不 要 求 代 码 必 须 同步 。 在 解决 函数 中 ， 竞 现 和 
拒绝 Promise 都 可 以 是 异步 的 。 即 使 解决 函数 立即 调用 resolve， 返 回 的 结果 也 要 等 到 下 
一 个 事件 循环 才 会 传 到 注册 的 反应 函数 。 这 就 是 Promise 最 关键 的 地 方 ! 以 下 代码 中 的 
Promise 会 在 2 秒 后 总 现 。 





























new Promise(resolve => setTimeout(resolve, 2000)) 





























注 1: 我 编写 了 一 个 名 为 Promisees 的 在 线 可 视 化 工具 ， 你 可 以 在 其 中 的 Promise 链 下 看 到 树 结 构 。 





大 
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注意 ， 只 有 这 些 函 数 (resolve 或 reject) 的 第 一 次 调用 才 有 作用 。 一 旦 解决 ，Promise 的 
结果 就 不 会 再 改变 了 。 以 下 代码 创建 了 一 个 Promise， 它 要 么 在 delay 时 间 到 时 兑现 ， 要 么 
在 3 秒 后 被 拒绝 。 这 里 利用 了 解决 Promise 后 再 调用 任何 函数 都 不 起 作用 的 事实 创造 了 竞 
争 条 件 ， 对 任意 函数 的 第 一 次 调用 决定 结果 。 




















function resolveUnderThreeSeconds(delay) { 
return new Promise(function (resolve, reject) { 
setTimeout(resolve, delay) 
setTimeout(reject, 3000) 


}) 


} 
resoLveUnderThreeSeconds(2000) // 2 秒 后 兑现 
resoLveUnderThreeSeconds(7000) // 3 秒 后 拒绝 











在 创建 新 Promise pl 时， 除了 可 以 给 resolve 传递 非 Promise 值 ， 还 可 以 给 它 传递 另 一 个 
Promise p2。 这 种 情况 下 ，p1 要 等 到 p2 解决 后 才能 解决 。 只 要 p2 一 解决 ，pl 就 会 用 它 的 
值 和 输出 进行 解决 。 因 此 ， 以 下 代码 与 简单 地 调用 fetch(' /items' ) 效果 相同 。 





























new Promise(resolve => resolve(fetch('/items'))) 


但 这 种 行为 仅 限于 使 用 resolve。 如 果 想 要 通过 reject 复 现 相同 的 行为 ， 你 会 发 现 p1 被 
拒绝 ， 拒 绝 理由 就 是 p2。 虽 然 resolve 可 以 导致 Promise 兑现 或 拒绝 ， 但 reject 只 能 导 
致 Promise 被 拒绝 。 如 果 传 给 resolve 的 Promise 被 拒绝 或 最 终 会 被 拒绝 ， 那 么 创建 的 
Promise 也 会 被 拒绝 。 反 过 来 对 reject 并 不 适用 。 如 果 在 解决 函数 中 调用 reject， 那 么 无 
论 传 给 reject 的 是 什么 值 ， 你 最 终 都 会 得 到 一 个 状态 为 拒绝 的 Promise。 




















在 一 些 情 况 下 ， 你 会 提前 知道 解决 Promise 要 用 到 哪个 值 。 此 时 你 可 以 直接 创建 一 个 
Promise， 如 下 所 示 。 接 下 来 你 就 可 以 用 Promise 链 实现 自己 的 逻辑 ， 而 不 必 借 助 返 回 某 些 
Promise 的 调用 (如 fetch 的 调用 )。 























new Promise(resolve => resolve(12)) 


当然 ， 如 果 你 只 是 想 要 一 个 预先 解决 的 Promise， 这 样 还 略 显 元 长 。 此 时 可 以 使 用 更 简短 
的 Pronise.resotve。 以 下 代码 与 前 面 示 例 的 结果 相同 。 如 果 说 有 区 别 ， 也 只 是 语义 上 的 。 
但 这 样 可 以 省 去 声明 解决 函数 的 麻烦 ， 而 且 语 法 也 更 方便 Promise 延续 及 连 缀 ， 看 起 来 也 
更 好 理解 。 

















Promise.resolve(12) 














与 前 面 看 到 的 resolve(fetch) 的 情况 类 似 ， 我 们 也 可 以 使 用 Promise.resolve 来 封装 其 他 
Promise 或 者 将 一 个 Thenable 对 象 转换 为 相应 的 Promise。 以 下 代码 展示 了 如 何 用 Promise. 
resolve 将 一 个 Thenable 对 象 转换 成 Promise， 然 后 像 使 用 其 他 Promise 一 样 使 用 它 。 
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Promise 
.resolve({ then: resolve => resolve(12) }) 
.then(x => console.log(x)) 
// <- 12 
如 果 提 前 知道 了 拒绝 的 理由 ， 那 么 你 可 以 使 用 Promise.reject。 以 下 代码 展示 了 如 何 使 用 
已 知 的 理由 reason 来 创建 最 终 会 被 拒绝 的 Promise。 我 们 可 以 在 反应 函数 中 使 用 Promise. 
reject 来 代替 throw 语句。Promise.reject 的 另 一 个 用 途 是 作为 第 头 函 数 的 隐 式 返回 值 ， 
这 是 使 用 throw 语句 无 法 做 到 的 。 
































Promise.reject(reason) 
fetch('/items').then(() => 
Promise.reject(new Error('arbitrarily')) 


) 

fetch('/items').then(() => { throw new Error('arbitrarily')}) 
可 以 想见 ， 你 在 实践 中 不 会 使 用 太 多 new Promise。 这 个 构造 国 数 更 多 地 会 被 支持 Promise 或 
原生 函数 (如 fetch) 的 库 在 内 部 使 用 。 既 然 通 过 连 绥 .then 和 .catch 可 以 创建 树 形 调用 结 
构 ， 在 原始 Promise 的 基础 上 任意 扩展 ， 那 么 在 API 代码 的 开头 调用 一 次 new Promise 基本 
就 足够 了 。 无 论 如 何 ， 理 解 Promise 的 创建 方式 对 于 掌握 基于 Promise 的 控制 流 至 关 重 要 。 


























4.1.4 Promise 的 状态 
Promise 有 三 种 可 能 的 状态 ， 待定、 兑现 和 拒绝 。 上 默认 状态 为 待定 ， 之 后 可 能 转换 为 竞 现 ， 
也 可 能 转换 为 拒绝 。 


Promise 只 能 解决 或 拒绝 一 次 。 对 已 确定 的 Promise 再 名 现 或 再 拒绝 不 会 产生 任何 效果 。 























如 果 Promise 解决 为 一 个 非 Promise、 非 Thenable 对 象 ， 则 确定 状态 为 兑现 。 如 果 Promise 
被 拒绝 ， 那 它 的 状态 也 是 确定 的 ， 只 不 过 状态 为 拒绝 。 





如 果 Promise pl 解决 为 另 一 个 Promise 或 Thenable p2， 那 么 pl 会 处 于 待定 状态 ， 但 最 终 
会 解决 (然后 就 不 能 再 解决 或 拒绝 了 )。p2 确定 后 ， 其 输出 会 转 到 pl1，p1 也 会 随 之 确定 。 
Promise 一 旦 兑现 ， 通 过 p.then 注册 的 反应 函数 就 会 尽快 执行 。 同 样 ，Promise 被 拒绝 
后 ， 通 过 p.catch 注册 的 反应 函数 就 会 尽快 执行 。Promise 确定 之 后 添加 的 反应 函数 也 会 
尽快 执行 。 





接 下 来 我 们 看 一 个 人 为 设计 的 示例 ， 它 说 明 可 以 在 第 一 个 fetch 请 求 的 .then 反应 函数 

中 创建 第 二 个 fetch Promise。 第 二 个 fetch 请 求 能 且 只 能 在 第 一 个 Promise 兑现 后 发 出 。 

console.1log 语句 能 且 只 能 在 第 二 个 Promise 兑现 后 才 在 控制 台中 打印 done。 
fetch('/items') 


.then(() => fetch('/item/first')) 
.then(() => console.log('done')) 
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现在 我 们 再 来 看 一 个 贴近 实际 的 示例 ， 其 中 涉及 更 多 步骤 。 这 个 例子 要 先 取 得 第 一 个 
fetch 请 求 的 输出 ， 然 后 根据 该 输出 创建 第 二 个 请 求 。 为 此 ， 这 里 使 用 res.json 方法 来 返 
回 一 个 解决 为 JSON 对 象 的 Promise。 接 着 用 这 个 对 象 拼 接 出 第 二 个 fetch 请 求 的 地 址 。 最 
后 ， 将 第 二 个 请 求 取得 的 iten 对 象 打印 到 控制 台 。 








fetch('/items') 
.then(res => res.json()) 
.then(items => fetch( /item/${ items[0].slug }°)) 
.then(res => res.json()) 
.then(item => console.log(item)) 





返回 的 结果 并 不 局 限于 Promise 或 Thenable。.then 或 .catch 反应 函数 也 可 以 返回 具体 的 
值 。 这 些 值 会 沿 Promise 链 传 给 下 一 个 反应 函数 。 因 此 ， 我 们 可 以 将 反应 函数 看 作 Promise 
链 中 前 一 个 反应 函数 的 输入 到 下 一 个 反应 函数 的 输入 的 转换 装置 。 以 下 示例 先 创建 了 一 个 
兑现 值 为 [1，2，3] 的 Promise， 后面 的 反应 函数 会 将 这 些 值 转换 为 [2，4，6]， 最 后 一 个 
反应 函数 会 在 控制 台中 输出 这 些 值 。 











Promise 
.resolve([1, 2, 3]) 
.then(values => vaLues.map(vaLue => value * 2)) 
.then(values => console.log(values)) 
// FS [2， 4， 6] 


注意 ， 我 们 也 可 以 转换 拒绝 分 支 中 的 数据 。4.1.3 节 中 介绍 过 ， 如 果 .catch 反应 函数 执行 
完 疫 有 出 现 错误 ， 且 没有 返回 被 拒绝 的 Promise， 那 么 它 返回 的 就 是 兑现 的 Promise， 因 此 
接 下 来 会 走 .then 分 支 。 














4.1.5 ”Promise#finally 提 案 


有 人 向 TC39 提交 了 一 个 有 关 Promise#finally 方法 的 提案 *, 即 在 Promise 确定 之 后 , 无 论 
是 确定 兑现 还 是 确定 拒绝 ， 都 会 调用 一 个 反应 函数 。 








我 们 可 以 将 以 下 代码 看 作 Promise#finally 的 简单 替代 。 也 就 是 说 ， 将 一 个 回调 传人 
p.then， 既 用 作 兑 现 反应 国 数 ， 也 用 作 拒 绝 反 应 函数 。 


function finally(p, fn) { 
return p.then( 
fn, 
fn 
) 
} 


但 是 二 者 在 语义 上 有 差别 。 首 先 ， 传 给 Promise#finally 的 反应 函数 不 接收 任何 参数 ， 























注 2: 这 个 建议 已 经 在 2018 年 1 月 TC39 第 62 次 会 议 上 表决 通过 为 阶段 4 (完成 )。 一 一 译 者 注 
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为 此 时 的 Promise 既 可 能 是 兑现 的 ， 也 可 能 是 被 拒绝 的 。 对 用 户 而 言 ，Promise#finally 一 
般 用 于 隐藏 fetch 请 求 执行 时 显示 的 加 载 动画 ， 或 执行 其 他 清理 任务 ， 此 时 并 不 需要 知道 
Promise 确定 后 的 值 。 经 过 修改 ， 以 下 代码 没有 向 任何 反应 函数 传递 参数 。 











function finally(p, fn) { 
return p.then( 
() => fn()， 
() => fn() 
) 
} 





传 给 Promise#finally 的 反应 函数 会 解决 为 父 Promise 的 结果 。 


const p1 = Promise.resolve('value') 
const p2 = pi1.finally(() => {}) 

const p3 = p2.then(data => console.log(data)) 
// <- 'valuye' 


这 一 点 与 p.then(fn，fn) 不 同 。 除 非 在 反应 函数 中 显 式 转发 父 Promise 的 值 ， 否 则 
p.then(fn，fn) 会 生成 一 个 新 的 兑现 值 ， 如 下 所 示 。 














const p1 = Promise.resolve('value') 

const p2 = pl.then(() => {}, () => {}) 

const p3 = p2.then(data => console.log(data)) 
// <- undefined 


以 下 代码 给 出 了 Promiset#finatty 的 完整 替代 脚本 。 


function finally(p, fn) { 
return p.then( 
result => resolve(fn()).then(() => result), 
err => resolve(fn()).then(() => Promise.reject(err)) 
) 
} 





注意 ， 如 果 传 给 Promise#finally 的 反应 函数 被 拒绝 或 抛 出 错误 ， 那 么 Promise#finally 返 
回 的 Promise 也 会 以 相同 的 原因 被 拒绝 ， 如 下 所 示 。 





const p1 = Promise.resolve('value') 

const p2 = pi.finally(() => Promise.reject('oops')) 
const p3 = p2.catch(err => console.log(err)) 

// <- 'oo0ps' 


仔细 查看 替代 脚本 后 你 会 发 现 ， 如 果 两 个 反应 函数 中 的 任何 一 个 出 现 异 常 ， 那 么 传 入 的 
Promise 就 会 被 拒绝 。 此 时 ， 通 过 Promise.reject 或 其 他 方式 返回 被 拒绝 的 Promise 意味 
着 resolve(fn()) 导致 Promise 被 拒绝 ， 因 而 调用 .finally 的 用 于 返回 Promise 确定 值 
的 .then 分 支 (如 果 有 的 话 ) 将 不 会 执行 。 


















































4.1.6 Promise.all 和 Promise.race 


写 异步 代码 时 ， 可 能 两 个 任务 中 的 一 个 任务 会 依赖 另 一 个 任务 的 结果 ， 因 此 这 两 个 任务 
须 串 行 执行 。 有 了 时 两 个 任务 也 可 能 互相 没有 依赖 ， 因 此 可 以 并 行 执 行 。 当 然 ，Promise 
很 擅长 控制 异步 顺序 流 ， 因 为 一 个 Promise 就 足以 触发 一 个 事件 链 ， 这 些 事件 会 相继 发 
生 。Promise 还 通过 另外 两 个 API 方 法 为 执行 并 行 任务 提供 了 解决 方案 : Promise.all 和 


Promitse.race。 




















祭 洲 























多 数 情况 下 ， 我 们 都 应 该 使 用 这 两 个 API 来 执行 并 行 任务 ， 因 为 它们 速度 很 快 。 假 设 我 们 
想 要 取得 库存 目录 中 两 个 商品 的 简介 ， 那 么 可 以 使 用 两 个 API 调用 ， 然 后 将 结果 打印 到 控 
制 台 。 以 下 代码 可 以 同时 运行 两 个 操作 ， 但 必须 分 别 打印 结果 。 对 这 两 个 任务 来 说 ， 将 结 
果 打 印 到 控制 台 的 操作 没什么 区 别 。 如 果 我 们 想 要 只 调用 一 次 API， 但 同时 传人 两 个 商品 ， 
那 就 不 能 使 用 两 个 fetch 请 求 。 











fetch('/products/chair') 
.then(r => r.json()) 
.then(p => ConsoLe.Log(p)) 

fetch('/products/table') 
.then(r => r.json()) 
.then(p => console.log(p)) 


Promise.all 方法 接收 一 个 Promise 数组 ， 并 返回 一 个 Promise， 比 如 p。 在 传 给 Promise. 
all 的 所 有 Promise 都 兑现 后 ，p 也 会 随 之 兑现 并 按照 传人 顺序 返回 各 Promise 兑现 的 结果 
数组 。 但 只 要 有 一 个 Promise 被 拒绝 ， 那 么 p 就 会 立即 以 该 Promise 的 拒绝 理由 确定 为 被 
拒绝 。 以 下 代码 用 Promise.all 获取 两 个 商品 的 信息 ， 然 后 只 用 一 条 console.1log 语句 打 
印 结果 。 




















Promise 
.all([ 
fetch('/products/chair'), 
fetch('/products/table') 
]) 


.then(products => console.log(products[0], products[1])) 
因为 返回 结果 是 一 个 数组 ， 所 以 代码 中 用 到 了 索引 ， 但 这 里 的 索引 没有 什么 语义 上 的 价 
值 。 为 此 ， 我 们 可 以 使 用 参数 解构 将 每 个 商品 的 信息 赋 给 相应 的 变量 ， 这 样 更 容易 让 人 理 
解 代码 的 含义 。 以 下 示例 用 解构 提升 了 代码 的 可 读 性 。 注 意 ， 即 使 只 有 一 个 参数 ， 但 由 于 
要 使 用 解构 ， 这 里 也 必须 用 括号 将 箭头 函数 的 参数 声明 括 起 来 。 











Promise 
.all([ 
fetch('/products/chair'), 
fetch('/products/table') 


) 
.then(([chair, table]) => console.log(chair, table)) 
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以 下 代码 表明 ， 如 果 一 个 Promise 被 拒绝 ， 那 么 最 终 的 p 也 会 被 拒绝 。 理 解 这 一 点 很 重要 : 
只 要 有 一 个 Promise 被 拒绝 ， 那 么 结果 数组 就 不 是 完全 兑现 的 ， 因 而 p 就 无 法 部 现 。 在 以 
下 示例 中 ， 由 于 p1 率先 被 拒绝 ，p 也 会 马上 被 拒绝 ， 不 会 再 等 p2 和 p3 的 解决 结果 。 





























const p1 = Promise.reject('failed') 
const p2 = fetch('/products/chair') 
const p3 = fetch('/products/table') 
const p = Promise 

“all([p1, p2, p3]) 

.Catch(err => console.log(err)) 

// <- 'failed' 





总 结 一 下 ，Promise.all 可 能 有 以 下 三 种 结果 。 


。 所 有 传人 的 Promise 都 兑现 ， 因 此 结果 Promise 也 兑现 。 

。 只 要 传人 的 Promise 有 一 个 被 拒绝 ， 那 么 结果 Promise 也 会 被 拒绝 。 

。 如 果 依 赖 的 Promise 一 个 都 没有 被 拒绝 ， 且 至 少 还 有 一 个 Promise 处 于 待定 状态 ， 那 么 
结果 Promise 也 会 处 于 待定 状态 。 
































Promise.race 方法 与 Promise.all 接收 的 参数 一 样 ， 区 别 在 于 前 者 中 确定 状态 的 第 一 个 
Promise 将 “赢得 比赛 "”， 其 结果 会 决定 Promise.race 返回 的 Promise 的 状态 。 











Promise 
.race([ 
new Promise(resolve => setTimeout(() => resolve(1), 1000)), 
new Promise(resolve => setTimeout(() => resolve(2), 2000)) 


]) 


.then(result => console.log(result)) 


1/ <- 1 

拒绝 状态 同样 会 导致 “比赛 结束 ”， 并 且 结 果 Promise 的 状态 也 是 被 拒绝 。Promise.race 
可 用 于 对 无 法 控制 的 Promise 设置 超时 。 例 如 ， 以 下 示例 中 传 给 Promise.race 的 两 个 
Promise 一 个 是 fetch 请 求 返 回 的 ， 另 一 个 会 在 5 秒 后 被 拒绝 。 因 此 ， 如 果 请 求 时 间 超 过 5 
秒 ， 则 “比赛 ”结果 就 是 拿 到 一 个 被 拒绝 的 Promise。 
































function timeout(delay) { 
return new Promise(function (resolve, reject) { 
setTimeout(() => reject('timeout'), delay) 
}) 
} 
Promise 
.race([ 
fetch('/large-resource-download'), 
timeout(5000) 
]) 
.then(res => console.log(res)) 
.Catch(err => console.log(err)) 





v AAA \ v AAA 
4.2 和 迭代 器 协议 与 可 和 迭代 协议 
ES6 中 引入 了 两 个 新 协议 : 运 代 器 和 可 友 代 对 象 。 这 两 个 协议 可 以 为 任何 对 象 定 义 友 代行 
为 。 本 节 将 先 介绍 如 何 将 对 象 转 换 成 可 运 代 序列 。 之 后 会 说 明 怎样 才 可 以 偷懒 ， 即 用 迭代 
器 定义 无 穷 序 列 。 最 后 ， 讨 论 定 义 可 迭代 对 象 时 的 一 些 现实 考量 。 





4.2.1 迭代 的 原理 

普通 对 象 要 想 转换 成 可 迭代 对 象 ， 必 须 遵 守 一 个 协议 : 给 这 个 对 象 的 Symbol.iterator 属 
性 赋值 一 个 函数 。 如 果 这 个 对 象 需 要 迭代 ， 那 么 每 次 友 代 都 会 调用 赋 给 Symbol .iterator 
的 可 迭代 协议 方法 。 





第 2 章 介绍 过 扩展 操作 符 ， 它 是 ES6 引入 的 利用 可 和 迭代 协议 的 几 个 新 语言 特性 之 一 。 对 以 
下 假想 的 iterable 对 象 使 用 扩展 操作 符 时 就 会 查询 这 个 对 象 的 Symbol.iterator 方法 ， 因 
为 这 个 对 象 实现 了 迭代 器 协议 。 返 回 的 迭代 器 将 用 于 获取 结果 的 值 。 





























const sequence = [...iterable] 


前 面 说 过 ， 符 号 属性 不 能 直接 仍 入 对 象 字 面 量 的 键 中 。 以 下 代码 展示 了 如 何 使 用 ES6 之 前 
的 语法 给 对 象 添 加 符号 属性 。 


const example = {} 
example[Symbol.iterator] = fn 





在 ES6 中 ， 我 们 可 以 使 用 计算 属性 名 将 符号 键 加 到 对 象 字 面 量 中 ， 避 免 像 前 面 那样 多 写 一 
行 代 码 ， 如 下 所 示 。 














const example = { 
[Symbol.iterator]: fn 


赋值 给 Symbol.iterator 的 方法 必须 返回 一 个 对 象 ， 该 对 象 必 须 遵 守 迭 代 右 协议。 这 个 协 
议 规定 了 如 何 从 可 和 迭代 序列 中 取 值 。 根 据 协 议 ， 和 迭代 器 方法 返回 的 对 象 必 须 有 一 个 next 方 
法 。next 方法 不 接受 参数 ， 并 且 返 回 一 个 包含 以 下 两 个 属性 的 对 象 。 


。 value， 序 列 中 的 当前 值 。 
。 done， 布尔 值 ， 表 明 序 列 是 否 结束 。 


接 下 来 我 们 通过 一 个 示例 来 理解 迭代 协议 背后 的 概念 。 通 过 添加 Symbolt.iterator 属性 ， 
我 们 将 sequence 对 象 写 成 了 一 个 可 迁 代 对 象 。 这 个 可 迁 代 对 象 〈 的 Symbol.iterator 方法 ) 
返回 一 个 迭代 器 对 象 。 每 次 调用 next 取 序 列 中 的 下 一 个 值 时 ， 都 会 返回 items 数组 中 的 一 
个 元 素 。 当 1 之 大 于 items 数组 的 最 大 索引 值 时 ， 则 返回 done: true， 以 表明 序列 已 经 迭代 


完毕 。 
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const items = ['i', 't', 'e'’, 'r', 'a', 'b', '1', 'e'] 
Const sequence = { 
[Symbol.iterator]() { 
let i=0 
return { 
next() { 
const value = items[i] 
i+t+ 
const done = i > items.length -1 
return { value, done } 
} 
} 
} 
} 


JavaScript 是 一 门 持续 进化 的 语言 ， 新 增 特性 永远 不 会 破坏 原 有 代码 。 


因此 ， 可 迭代 对 象 





不 能 利用 已 有 的 forEach 和 for..in 进行 迭代 。ES6 为 欠 代 可 迭代 对 象 提 供 了 以 下 几 种 方 


式 : for..of、 扩 展 操作 符 ... 和 Array.from。 


for..of 迭代 方法 可 用 于 迭代 任何 可 和 迭代 对 象 。 以 下 示例 展示 了 如 何 通 





的 可 达 代 对 和 象 sequence。 


for (const item of sequence) { 
console. log(item) 
// <- 
// <- 
// <- 
// <- 
// <- 
// <- 
// <- 
// <- 

} 


m 一 可 onmnmr 





过 它 迭 代 前 面 定 义 











常规 对 象 可 以 像 刚刚 介绍 的 那样 通过 实现 Symbol.iterator 变 成 可 迭代 对 象 。 在 ES6 的 框 
架 下 ，Array、String、DOM 中 的 NodeList 以 及 arguments 默认 都 是 可 迭代 的 ， 这 也 为 
for. .of 提供 了 用 武之 地 。 要 想 从 值 的 可 迭代 序列 获取 一 个 数组 ， 可 以 使 用 扩展 操作 符 ; 
扩展 后 的 每 一 项 都 会 成 为 结果 数组 中 的 一 个 元 素 。 使 用 Array.from 也 可 以 实现 相同 的 效 
果 。 此 外 ，Array.fron 还 可 以 将 类 似 数组 的 对 象 (具有 Length 属性 ， 属 性 是 以 0 开头 的 整 














数 ) 转换 成 数组 。 


consoLe.Log([...sequence]) 

// We ['i', ts 'e ' ， es 'a', 'b', "ES 'e'] 
console.log(Array.from(sequence)) 

// 乱世 [  ， St 'e ' ， ER 让 'b', Ply 'e'] 
console.log(Array.from({ 0: 'a', 1: 'b', 2: 'c', length: 3 })) 
VU [Sy bh 











我 们 借 sequence 对 象 来 总 结 一 下 。sequence 对 象 遵 守 了 可 迭 代 协 议 ， 














因为 它 给 [Symbol. 
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iterator] 赋值 了 一 个 方法 。 结 果 sequence 就 成 了 可 迭代 对 象 ， 即 它 可 以 被 和 迭代。 这 里 说 
的 方法 返回 一 个 对 象 ， 该 对 象 遵守 迭 代 吉 协 议 。 当 我 们 需要 迭代 对 象 时 ， 迭 代 器 方法 就 会 
被 调用 ， 而 它 返回 的 迭代 器 则 用 于 从 sequence 对 象 中 取 值 。 要 想 迭 代 可 迭代 对 象 ， 可 以 使 
用 for..of、 扩 展 操 作 符 或 Array.fron 方法 。 


从 本 质 上 来 说 ， 这 两 个 协议 的 优势 在 于 它们 提供 了 有 意义 的 方式 ， 让 我 们 能 够 轻松 地 友 代 
集合 和 类 似 数组 的 对 象 。 将 任意 对 象 定 义 为 可 迭代 对 象 的 功能 非常 强大 ， 这 样 不 同 的 库 就 
可 以 因 遵 循 语言 原生 支持 的 协议 而 具有 共性 : 可 以 欠 代 。 如 前 所 示 ， 实 现 返 代 器 协议 一 点 
也 不 麻烦 ， 而 且 由 于 这 是 新 增 特性 ， 也 不 会 影响 原 有 代码 的 行为 。 





























例如 ，jQuery 及 document.querySelectorAll 都 返回 类 似 数组 的 对 象 。 如 果 jQuery 在 其 集 
合 原型 上 实现 了 迭代 器 协议 ， 那 么 就 可 以 使 用 原生 的 for. .of 来 夺 代 其 集合 中 的 元 素 。 





for (const element of $('1i')) { 
console.log(element) 


// <- jQuery 集合 中 的 <Li> 元 素 
} 





可 选 代 对 象 不 一 定 是 有 限 的 ， 其 元 素 也 可 以 是 无 限 的 。 下 面 就 来 讨论 一 下 无 穷 序列 及 其 
实现 。 


4.2.2 无 穷 序列 

迭代 器 本 质 上 是 懒惰 的 。 迫 代 器 序列 中 的 元 素 每 次 只 能 取出 一 个 ， 即 使 序列 是 有 限 的 。 注 
意 ， 如 果 没 有 懒惰 的 属性 ， 那 么 无 穷 序 列 甚至 无 法 表示 。 无 穷 序 列 不 能 用 数组 表示 ， 否 则 
用 扩展 操作 符 或 Array.fron 将 序列 转换 成 数组 会 导致 JavaScript 引 警 崩溃， 因为 这 会 进入 
无 穷 循环 。 











以 下 代码 展示 了 一 个 生成 0~1 范围 内 随机 浮 点 数 的 无 穷 序 列 的 迭代 器 。 注 意 ，next 方法 返 
回 的 对 象 中 根本 没有 值 为 true (表示 序列 结束 ) 的 done 属性 。 代 码 使 用 两 个 第 头 函 数 隐 
式 返 回 了 两 个 对 象 。 第 一 个 返回 的 是 迄 代 器 对 象 ， 用 于 壳 历 随机 数组 成 的 无 穷 序 列 。 第 二 
个 箭头 函数 用 Math.random() 从 序列 中 取出 每 个 值 。 











const random = { 
[Symbol.iterator]: () => ({ 
next: () => ({ value: Math.random() }) 
}) 
} 


使 用 Array.from(random) 或 [...random] 将 可 迭代 对 象 randon 转换 为 数组 均 会 导致 程序 崩 
溃 ， 因 为 这 个 序列 没有 尽头 。 无 穷 序列 很 容易 将 浏览 器 、Node.js 服务 器 进程 搞 骨 涡 ， 因 此 
要 小 心 使 用 。 
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我 们 可 以 通过 几 种 方式 避免 无 穷 循 环 的 风险 ， 以 安全 地 使 用 无 穷 序 列 。 第 一 种 方式 是 用 解 
构 取 出 序列 中 特定 位 置 的 值 ， 如 下 所 示 。 


const [one，another] = random 
ConsoLe.Log(one) 

// <- 0.23235511826351285 
console.log(another) 

// <- 0.28749457537196577 








解构 无 穷 序列 不 适合 大 量 取 值 ， 特 别 是 要 设置 动态 条 件 的 情况 下 ， 比 如 取出 前 i 个 值 或 在 
满足 某 个 条 件 时 一 直 取 值 。 此 时 最 好 使 用 for. .of ， 以 定义 中 断 条 件 来 避免 无 穷 循 环 。 这 
是 以 编程 方式 取得 所 需 值 的 最 好 办 法 。 以 下 示例 就 用 for. .of 迭代 了 无 穷 序列 ， 但 只 要 有 
值 大 于 9.8， 就 中 断 循 环 。 鉴 于 Math.randon 能 生成 0~l 的 任意 值 ， 循 环 一 定 会 中 断 。 

















for (const value of random) { 
if (value > 0.8) { 
break 


console.log(value) 


} 


不 过 ， 这 样 的 代码 以 后 再 回 过 头 来 看 会 很 难 理解 ， 因 为 很 多 代码 都 在 处 理 迭 代 序 列 、 打 印 
随机 数 ， 还 有 一 个 最 大 值 作为 条 件 。 将 其 中 一 部 分 逻辑 抽象 到 男 一 个 方法 中 可 以 使 代码 更 
好 理解 。 


从 无 穷 序 列 中 取 值 的 一 个 常见 模式 是 取 前 几 个 值 。 虽 然 可 以 用 for. .of 配合 break 达到 目 
的 ， 但 最 好 将 它们 抽象 为 一 个 take 方法 。 以 下 示例 展示 了 take 方法 的 一 种 实现 方式 。 这 
个 方法 接收 一 个 sequence 和 一 个 表示 想 从 sequence 中 取 前 几 个 值 的 amount 参数 ， 并 返回 
一 个 可 迭代 对 象 。 在 迭代 这 个 对 象 时 ， 它 会 取得 传 入 序列 的 迭代 器 ， 其 next 方法 也 会 代理 
到 传 入 的 序列 。 只 要 amount 不 小 于 1 就 会 返回 值 ， 否 则 结束 序列 。 



















































































function take(sequence，amount) { 
return { 
[Symbol.iterator]() { 
const iterator = sequence[Symbol.iterator]() 
return { 
next() { 
if (amount-- < 1) { 
return { done: true } 
} 


return iterator.next() 














我 们 的 实现 对 无 穷 序列 非常 有 效 ， 因 为 它 包含 了 一 个 固定 的 退出 条 件 : 只 要 anount 小 于 1， 
take 返回 的 序列 就 结束 。 现 在 不 用 再 像 前 面 那 样 从 random 中 取 值 了 ， 只 要 按照 以 下 方式 
编写 代码 即 可 。 























[...take(random, 2)] 
// <- [0.304253100650385, 0.5851333604659885] 


这 个 模式 可 以 将 任何 无 穷 序列 归 约 为 有 限 序 列 。 如 果 你 想 要 的 有 限 序 列 不 是 “前 N 个 值 ”， 
而 是 前 面 所 示 的 “第 一 个 大 于 0.8 的 数值 之 前 的 所 有 随机 数 ”"， 修 改 一 下 take 的 退出 条 件 
就 可 以 了 。 以 下 示例 中 的 range 函数 有 一 个 默认 值 为 6 的 参数 Low 和 一 个 默认 值 为 1 的 参 
数 high。 只 要 序列 中 有 任何 值 越 界 ， 就 立即 停止 取 值 。 




















function range(sequence, low = 0, high = 1) { 
return { 
[Symbol.iterator]() { 
const iterator = sequence[Symbol.iterator]() 


return { 
next() { 
const item = iterator.next() 
if (item.value < low || item.value > high) { 
return { done: true } 
} 
return item 
} 
} 
} 
} 
} 


现在 不 用 因为 害怕 无 穷 循环 永 无 尽头 而 中 断 for. .of 循环 了 ， 我 们 可 以 确保 ， 只 要 取 到 的 
值 超出 预期 范围 ， 循 环 一 定 会 退出 。 这 样 一 来 ， 代 码 关注 的 就 不 再 是 序列 如 何 生成 ， 而 是 
如 何 使 用 这 个 序列 。 以 下 示例 根本 用 不 着 for..of， 因 为 退出 条 件 已 经 内 置 在 作为 中 间 层 
的 range 函数 中 了 。 




















const low = [...range(random, 0, 0.8)] 
// <- [0.68912092433311, 0.059788614744320, 0.09396195202134] 


这 种 将 复杂 性 抽象 到 另 一 个 函数 中 的 做 法 有 助 于 保持 代码 意图 明确 ， 使 得 我 们 只 想 取得 一 
个 派生 序列 时 无 须 使 用 for. .of 循环 。 这 个 示例 也 表明 ， 序 列 可 以 相互 融合 和 租 入 。 我 们 
先 创建 了 一 个 通用 的 无 穷 序列 random， 然 后 将 它 输送 到 range 函数 ， 这 个 函数 会 返回 一 个 
派生 的 序列 ， 该 序列 会 在 取 值 小 于 或 大 于 设 定 范 围 时 终止 。 有 关 友 代 喜 的 非常 重要 的 一 点 
是 ， 不管 有 没有 组 合 ，range 国 数 返 回 的 选 代 器 也 可 以 懒惰 帮 代 。 这 就 意味 着 你 可 以 组 合 
任意 数量 的 迭代 器 ， 对 它们 进行 遍历 、 过 涯 和 作为 退出 条 件 。 
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发 现 无 穷 序列 


迭代 器 本 身 没有 任何 标识 来 表明 它 生 成 的 序列 是 否 无 穷 。 与 经 典 的 停机 问题 一 样 ( 见 
图 4-5)， 有 时 在 代码 中 无 法 知道 菜 个 序列 是 否 为 无 穷 序列 。 





DERNE DoESITHALT (PROSRAM): 


RETRN TRUE'; 





THE BIG PICIORE 50LUTON 
PTHE HAUTING PROBLEM 











4-5: XKCD 漫画 中 描述 的 停机 问题 


一 般 情 况 下 ， 你 还 是 可 以 知道 一 个 序列 是 否 为 无 穷 序 列 。 如 果 是 无 穷 序 列 ， 那 么 你 自 
已 可 以 写 一 个 退出 条 件 ， 以 确保 程序 不 会 因为 陷入 无 穷 循 环 而 前 省。 虽然 for..of 一 
般 不 会 遇 到 这 个 问题 ， 但 如 果 遇 到 了 却 又 没有 退出 条 件 ， 在 使 用 扩展 操作 符 或 Array. 
fronm 的 情况 下 ， 程 序 就 会 迅速 前 满 。 








介绍 完 创 建 可 迭代 对 象 的 技术 细节 后 ， 接 下 来 看 看 如 何在 实践 中 使 用 迭代 器 。 


4.2.3 和 迭代 对 象 以 生成 键 / 值 对 
将 普通 对 象 转换 为 可 迭代 对 象 有 非常 多 的 实用 场景 。 对 象 映 射 、 和 希望 可 以 友 代 的 伪 数 组 、 
4.2.2 节 中 的 随机 数 生成 器 ， 以 及 属性 通常 可 以 友 代 的 类 和 普通 对 象 ， 都 可 以 通过 遵循 可 迭 
代 协 议 而 获 益 。 





通常 来 说 ， 我 们 会 用 JavaScript 对 象 来 表示 字符 串 键 与 任意 值 之 间 的 映射 。 以 下 代码 创建 
了 一 个 颜色 名 称 与 相应 的 十 六 进 制 RGB 值 之 间 的 映射 。 有 时 可 能 需要 遍历 其 中 的 颜色 名 、 
十 六 进 制 值 或 键 / 值 对 。 


























const colors = { 
green: '#0e0', 
orange: '#f50', 
pink: '#eQ7' 

} 


以 下 代码 为 colors 映射 实现 了 产生 [key，value] 序列 的 可 迭代 能 力 。 因 为 遵循 迭代 器 协 
议 给 Symbol.iterator 属性 赋值 7， 所 以 遍历 这 个 映射 的 键 和 值 就 变 得 非常 简单 了 。 





const colors = { 
green: '#0e0', 
orange: '#f50°', 
pink: '#e07', 
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[Symbol.iterator]() { 
const keys = Object.keys(colors) 
return { 
next() { 
const done = keys.length === 0 
const key = keys.shift() 
return { 
done， 
value: [key, colors[key]] 


如 果 想 要 取得 所 有 的 键 / 值 对 ， 可 以 使 用 扩展 操作 符 ...， 如 下 所 示 。 


console.log([...colors]) 
// <- [['green', '#0e0'], ['orange', '#f50'], ['pink', '#e07']] 





但 是 ， 用 一 堆 实现 迭代 器 协议 的 代码 “污染 ”本 来 很 简单 的 colors 映射 是 有 问题 的 ， 因 为 
可 选 代 能 力 本 身 与 存储 在 这 个 映射 中 的 颜色 名 称 和 十 六 进 制 值 基本 没什么 关系 。 最 好 的 办 
法 是 将 添加 键 / 值 对 和 迭代 器 的 逻辑 提取 到 一 个 可 重用 的 国 数 里 ， 从 而 使 其 与 colors 映射 解 
耦 。 这 样 一 来 ， 我 们 可 以 将 keyValueIterable 函数 单独 放 在 某 个 地 方 ， 留 作 以 后 重用 。 



































function keyValueIterable(target) { 
target[Symbol.iterator] = function 
const keys = Object.keys(target) 
return { 
next() { 
const done = keys.length === 0 
const key = keys.shift() 
return { 
done， 
value: [key, target[key]] 
} 
} 
} 
} 
return target 


} 


一 


) 【 


现在 我 们 可 以 调用 keyValueIterable 并 传人 colors 对 象 ， 从 而 将 colors 转换 成 一 个 可 迭 
代 对 象 。 实 际 上 ， 我 们 可 以 对 任何 想 要 迭代 得 到 其 键 / 值 对 的 对 象 调用 keyvaLueIterablte。 
迭代 行为 本 身 与 对 象 保存 的 是 什么 信息 无 关 。 添 加 Symbol.iterator 行为 后 ， 就 可 以 将 对 
象 看 作 可 迭代 对 象 了 。 以 下 代码 迭代 了 colors 对 象 的 键 / 值 对 ， 但 只 打印 颜色 值 。 





























const colors = keyValueIterable({ 
green: '#0e0', 
orange: '#f50', 
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for (const [ , color] of colors) { 
console. log(color) 


// <- '#0eQ' 
// <- '#f50' 
// <- '#eQ7' 


} 
音乐 播放 器 就 是 一 个 有 趣 的 用 例 。 


4.2.4 打造 多 功能 播放 列表 
假设 你 正在 开发 一 款 音乐 播放 器 ， 该 播放 器 可 以 在 播放 完 列 表 中 的 所 有 音乐 之 后 就 停止 ， 也 
可 以 打开 循环 模式 反复 播放 。 只 要 有 无 穷 循 环 列表 的 需求 ， 就 可 以 芬 虑 使 用 可 迭代 协议 。 


如 果 有 人 在 自己 的 资料 库 中 添加 了 儿 首 歌 ， 你 可 以 将 它们 保存 在 数组 中 ， 如 下 所 示 。 











const songs = [ 
'Bad moon rising - Creedence', 
'Don't stop me now - Queen', 
'The Scientist - Coldplay', 
'Somewhere only we know - Keane' 


] 





我 们 可 以 创建 一 个 playlist 函数 ， 以 返回 一 个 表示 当前 应 用 要 播放 的 曲目 的 序列 。 这 个 函 
数 接收 两 个 参数 : songs 和 repeat， 前 者 由 用 户 提 供 ， 后 者 表示 循环 次 数 ， 如 1 次 、2 次 
或 无 限 循 环 (Infinity)。 














播放 列表 playlist 函数 的 实现 如 下 所 示 。 我 们 用 从 0 开始 的 index 值 跟 踪 曲 目 序列 中 的 
音乐 的 位 置 ， 播 放下 一 首 曲目 时 就 给 index 加 1， 直 到 当前 循环 播放 结束 。 此 时 ， 我 们 给 
repeat 减 1 并 将 index 重 置 为 0。 没有 可 播放 曲目 且 repeat 为 0 时， 播放 结束 。 























function playlist(songs, repeat) { 
return { 
[Symbol.iterator]() { 
let index = 0 
return { 
next() { 
if (index >= songs.length) { 

repeat-- 
index = 0 


} 
if (repeat < 1) { 
return { done: true } 
} 
const song = songs[index] 
index++ 
return { done: false, value: song } 





以 下 代码 展示 了 playlist 函数 如 何 接 收 一 个 歌曲 数组 ， 并 根据 指定 循环 次 数 返回 一 个 播放 
序列 。 如 果 循 环 次 数 为 Infinity， 那 么 返回 的 序列 也 将 是 无 穷 序列 ， 否 则 就 是 有 限 序列 。 
console.log([...playlist(['a', 'b'], 3)]) 
[//><- La Ds a Du sya. Bb 
为 了 迭代 播放 列表 ， 我 们 还 需要 编写 一 个 player 函数 。 假 设 已 经 有 一 个 pLaySong 函数 可 
用 于 播放 歌曲 ， 并 在 播放 结束 后 调用 回调 ， 那 这 个 player 函数 可 以 按照 如 下 方式 来 编写 。 
总 的 来 说 ， 我 们 会 异步 循环 传人 序列 的 迭代 器 ， 在 前 一 首 歌曲 播放 结束 后 回调 播放 下 一 
首 。 因 为 两 次 调用 g.next 会 间隔 一 段 时 间 ， 每 首 歌 曲 总 需要 一 段 时 间 才 能 播放 完 ( 播 放歌 
曲 是 在 playsong 中 实现 的 )， 所 以 因 无 限 循环 导致 程序 卡 死 的 风险 很 小 。 即 使 playlist 图 
数 返 回 的 是 无 穷 序 列 ， 问 题 也 不 大 。 






























































function player(sequence) { 
const g = sequence[Symbol.iterator]() 
more() 
function more() { 
const item = g.next() 
if (item.done) { 
return 


playSong(item.value, more) 
下 
所 有 功能 齐备 之 后 ， 重 复 播 放 一 个 音乐 列表 只 需要 几 行 代码 ， 如 下 所 示 。 




















const songs = [ 
"Bad moon rising - Creedence ' ， 
"Don't stop me now - Queen ' ， 
'The Scientist - Coldplay', 
'Somewhere only we know - Keane' 
] 
const sequence = playlist(songs, Infinity) 
player(sequence) 


此 时 要 加 入 随机 播放 功能 也 不 难 。 只 要 稍微 修改 一 下 playlist 函数 ,添加 一 个 shuffle 标 
签 ， 如 果 用 户 传 人 了 这 个 参数 ， 对 播放 列表 随机 重新 排序 即 可 。 


function playlist(inputSongs, repeat, shuffle) { 
const songs = shuffle ? shuffleSongs(inputSongs) : inputSongs 
return { 
[Symbol.iterator]() { 
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let index = 0 
return { 
next() { 
if (index >= songs.Length) { 
repeat-- 
index = 0 


} 
if (repeat < 1) { 
return { done: true } 


} 
const song = songs[index] 
index++ 
return { done: false, value: song } 
} 
} 
} 


} 
} 
function shuffleSongs(songs) { 
return songs.slice().sort(() => Math.random() > 0.5 ? 1 : -1) 


} 


如 果 想 要 打 乱 播放 次 序 ， 那 么 必须 将 shuffle 参数 设置 为 true。 否 则 ,歌曲 还 是 会 按照 
用 户 添加 的 顺序 播放 。 这 里 又 一 次 将 列表 排序 的 逻辑 抽象 了 出 来 ， 与 前 面 的 函数 实现 了 解 
而 。playlist 函数 仍然 只 专注 于 生成 供 播放 器 播放 的 曲目 序列 。 














console. 109([ :Playtist([ a','b'], 3, true)]) 
// <- [' a! 有 'b' 党 'b' 3 'a! 3 'a', 'b'] 





你 可 能 会 说 ，playltist 其 实 也 不 该 管 排 序 的 事 。 更 好 的 设计 思路 可 能 是 将 重 排 函数 放 入 调 
用 代码 。 如 果 playlist 还 是 原样 ， 没 有 shuffle 参数 ， 我 们 仍然 可 以 通过 以 下 代码 生成 重 
排 后 的 曲目 序列 。 




















function shuffleSongs(songs) { 
return songs.slice().sort(() => Math.random() > 0.5 ? 1 : -1) 


} 
console.log([...playlist(shuffleSongs(['a', 'b']), 3)]) 
// <- ['a'’, 'b', 'b', 'a', 'a', 'b'] 


作为 ES6 中 的 一 个 重要 工具 ， 返 代 器 不 仅 能 帮助 我 们 解 克 代码， 还 能 帮助 我 们 实现 之 前 很 
难 实现 的 构造 ， 如 模糊 处 理 曲目 序列 的 能 力 ， 无 论 序列 是 无 穷 的 还 是 有 限 的 。 从 某 种 程度 
上 来 说 ， 这 种 无 差别 处 理 令 使 用 和 迭代 喜 协 议 的 代码 写 起 来 更 优雅 。 当 然 ， 将 未 知 的 可 迭代 
对 象 转换 成 数组 时 (如 通过 扩展 操作 符 ) 也 有 一 定 的 风险 。 如 果 碰 巧 要 转换 的 是 一 个 无 穷 
序列 ， 那 可 能 会 导致 程序 月 涡 。 








生成 器 也 是 一 种 返回 可 返 代 对 象 的 国 数 ， 但 使 用 它 不 必 显 式 声明 带 有 Symbol.iterator 方 
法 的 对 象 字面 量 。 正 因为 如 此 ， 用 生成 器 实现 4.2.2 节 中 的 range 和 take 函数 更 容易 ， 而 
且 它 还 有 一 些 更 有 意思 的 用 例 。 























4.3 生成 器 函数 与 生成 器 对 象 


生成 器 是 ES6 Wei 生成 器 的 定义 方式 是 先 创建 一 个 函数 ， 调 用 这 个 函数 再 返回 生 
成 器 对 象 9。 这 个 9 是 一 个 可 迭代 对 象 ， 我 们 可 以 通过 Array.fron(9)、[.……:9] 或 for..of 
循环 来 使 用 它 。 生成 器 极 数 多 许 我 们 声明 一 种 特殊 的 迭代 器 。 这 种 迭代 器 会 推迟 代码 的 执 
行 ， 同 时 保持 自己 的 上 下 文 。 











4.3.1 生成 器 基础 


上 一 市 介绍 过 迄 代 器 ， 我 们 知道 每 次 迭代 都 会 调用 .next() 方法 从 序列 中 取 一 个 值 。 在 生 
成 器 中 看 不 到 返回 值 的 next 方法 ， 只 能 看 到 向 序列 中 添加 值 的 yietLd 关键 字 。 











以 下 是 一 个 生成 器 函数 的 示例 。 注 意 function 关键 字 后 面 的 星 号 *。 这 并 不 是 我 们 打 错 
了 ， 星 号 是 生成 器 函数 的 标志 。 








function* abc() { 
yield 'a' 
yield 'b' 
yield 'c' 
} 
生成 器 对 象 同 时 遵守 可 迭代 协议 和 进 代 器 协议 。 


。 生成 器 对 象 chars 是 通过 函数 abc 创建 的 。 

。 对 象 chars 是 一 个 可 和 帮 代 对 象 ， 因 为 它 有 一 个 Symbol.iterator 方法 。 
。 对 象 chars 也 是 一 个 迭代 器 ， 因 为 它 有 一 个 .next 方法 。 

。 chars 的 迭代 器 就 是 它 自己 。 








以 上 表述 用 JavaScript 代码 来 证 实 ， 如 下 所 示 。 


const chars = abc() 

typeof chars[Symbol.iterator] === 'function' 
typeof chars.next === 'function' 
chars[Symbol.iterator]() === chars 

console. ee from(chars)) 

// <- ['a'’, 'b', 'c'] 

console. .chars]) 


// <- ['a', 'b', 'c'] 


创建 生成 器 对 象 时 ， 我 们 会 得 到 一 个 用 生成 器 函数 产生 可 迭代 序列 的 迭代 器 。 每 当代 码 执 
行 到 yield 表达 式 ， 迭 代 器 就 会 返回 该 表达 式 的 值 ， 而 且 生 成 器 函数 会 暂停 执行 。 





以 下 示例 表明 迭代 会 触发 生成 器 函数 中 的 副作用 。 当 生成 器 函数 恢复 执行 以 返回 序列 中 下 
一 个 元 素 时 ， 每 个 yield 语句 后 面 的 console.1og 语句 都 会 执行 。 
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function* numbers() { 
yield 1 
console.log('a') 
yield 2 
console.log('b') 
yield 3 
console.log('c') 


} 


假设 你 创建 了 生成 器 函数 numbers， 然 后 通过 扩展 操作 符 将 其 内 容 保存 为 一 个 数组 ， 并 打 
印 到 控制 台 。 思 考 numbers 函数 中 的 副作用 ， 你 觉得 以 下 代码 执行 后 控制 台 会 输出 什么 ? 
扩展 操作 符 会 迭代 整个 序列 ， 以 帮助 你 创建 一 个 数组 ， 在 以 下 的 console.log 语句 打印 出 
数组 之 前 ， 所 有 的 副作用 都 会 在 通过 解构 构建 数组 的 过 程 中 被 执行 。 


下 

















console.log([...numbers()]) 


// <- al 
// <- 'b'’ 
// <- 'c! 


// < [1, 2， 3] 


如 果 换 作 使 用 for..of 循环 ， 那 就 可 以 保持 numbers 函数 中 声明 的 顺序 了 。 以 下 示例 用 
for..of 循环 逐个 打印 了 numbers 序列 中 的 每 个 元 素 。 第 一 次 从 生成 器 函数 中 取 number 时 ， 
它 会 返回 1 并 暂停 执行 。 第 二 次 ， 生 成 器 函数 会 从 上 次 暂停 的 地 方 恢复 并 打印 出 副作用 a， 
接着 返回 2。 第 三 次 的 副作用 是 b， 并 返回 了 3。 第 四 次 的 副作用 是 <， 此 时 生成 器 指示 序 
列 已 结束 。 
































for (const number of numbers()) { 
console. log(number) 
// <- 1 
// <- "a 
// <- 2 
// <- 'b' 
// <- 3 
// <- 'c! 
} 





使 用 yield* 委托 生成 序列 
生成 器 函数 可 以 使 用 yield* 将 生成 序列 的 任务 委托 给 一 个 生成 器 对 象 或 其 他 可 选 代 对 象 。 
为 ES6 中 的 字符 串 遵 宁可 克 代 协议 ， 所 以 可 以 通过 以 下 代码 将 字符 事 hetlo 拆 分 为 字母 。 


function* salute() { 
yield* 'hello' 


console.log([...salute()]) 
// en ['h', 'e', SL 风 '0'] 











当然 ， 此 时 直接 使 用 [hetto ] 更 简单 。 然 而 ， 有 多 条 yield 语 向 时 ， 委 托 的 作用 
就 体现 出 来 了 。 以 下 的 示例 修改 了 salute 生成 器 来 接收 一 个 参数 name， 从 而 生成 了 包 
含 字符 囊 'hello you' 中 所 有 字符 的 数组 。 


function* salute(name) { 
yield* 'hello ' 
yield* name 


} 
console.log([...salute('you')]) 
// 二 ['h', 'e', els i '0'，, 1 Ss '0'，, 'u'] 


再 次 强调 ,我 们 可 以 通过 yield* 将 生成 序列 的 任务 委托 给 任何 遵守 可 和 迭代 协议 的 对 


象 ， 而 不 全 仪 本 十 件 涉 这 些 对 象 包括 生成 器 对 象 、 数 组 、arguments、 浏 览 器 中 的 
NodeList， 总 之 只 要 实现 了 Symbol.iterator 就 可 以 。 以 下 示例 展示 了 如 何 同 时 使 用 
yield 和 yteLdx* ， 并 组 合 其 他 生成 器 函数 、 可 和 途 代 对 象 和 扩展 操作 符 来 描述 一 个 值 序 
列 。 你 能 推断 出 console.1log 语 身 会 打印 出 什么 结果 吗 ? 


const salute = { 
[Symbol.iterator]() { 
const items = ['h', 
return { 
next: () => ({ 
done: items.length === 0， 
value: items.shift() 
}) 
} 
} 
} 
function* multiplied(base, multiplier) { 
yield base + 1 * multiplier 
yield base + 2 * multiplier 
} 
function* trailmix() { 
yield* salute 
yield 0 
yield* [1, 2] 
yield* [...multiplied(3, 2)] 
yield [...multiplied(6, 3)] 
yield* multiplied(15, 5) 


e', le WL '0'] 


console.log([...trailmix()]) 


以 下 就 是 生成 器 函数 trailmix 返回 的 序列 。 


[hs 'e', 已 ‘Us 0 0， 1， 2， 5， 7， [9， 12] ， 20， 25] 








除了 使 用 扩展 操作 符 、for. .of 和 Array.fron 来 迭代 生成 器 对 象 ， 我 们 还 可 以 直接 手工 迭 
代 生 成 器 对 象 。 下 面 就 来 看 看 怎么 做 。 
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4.3.2 ”手工 迭代 生成 器 


生成 器 迭代 并 不 限于 for..of、Array.from 或 扩展 操作 符 。 与 任何 可 迭代 对 象 一 样 ， 有 
Symbol.iterator 就 可 以 通过 .next 按 需 取 值 ， 而 不 必 像 使 用 for. .of 那样 严格 同步 ， 或 像 
使 用 Array.fron 和 扩展 操作 符 那 样 一 次 性 取出 所 有 值 。 因 为 生成 器 对 象 既 是 可 迭代 对 象 也 
是 迭代 器 ， 所 以 不 必 调 用 g[Symbol.iterator]() 返回 迭代 器 ，g 本 身 就 是 迭代 器 ， 它 与 调 
用 Symbol.iterator 方法 返回 的 对 象 是 同一 个 对 象 。 














假设 有 前 面 创建 的 迭代 器 numbers， 以 下 示例 展示 了 如 何 使 用 生成 器 对 象 和 while 循环 来 
手工 迭代 它 。 记 住 ， 枕 代 器 返回 的 元 素 都 有 一 个 表示 序列 是 否 结束 的 done 属性 以 及 一 个 表 
示 序 列 中 当前 值 的 value 属性 。 
const g = numbers() 
while (true) { 
const item = g.next() 


if (item.done) { 
break 


console. log(item.value) 


} 
与 for..of 相 比 ， 用 从 代 器 遍历 生成 器 看 起 来 有 点 复杂 ， 但 它 适合 一 些 有 意思 的 用 例 。 特 别 是 
for. .of 始终 是 一 个 同步 循环 ， 而 有 了 和 迭代 器 的 话 ， 何 时 调用 g.next 就 由 我 们 说 了 算 。 此 外 ， 
这 个 优势 还 衍生 出 了 更 多 机 会 ， 比 如 ， 我 们 可 以 在 获取 某 个 异步 操作 的 结果 后 再 调用 g.next。 
每 次 在 生成 器 上 调用 .next() 都 可 能 有 四 种 “事件 ”导致 生成 器 内 部 暂停 执行 ， 并 
给 .next() 的 调用 者 返回 一 个 结果 。 简 单 总 结 如 下 。 














。 yield 表达 式 返 回 序列 中 的 下 一 个 值 。 
。 return 语句 返回 序列 中 的 最 后 一 个 值 。 
。 throw 语句 完全 中 断 生成 器 的 执行 。 
。 到 达 生 成 器 函数 的 最 后 ， 获 取 值 { done: true }， 因 为 函数 隐 式 地 返回 undefined。 












































迭代 完 生成 器 g 的 整个 序列 后 ， 再 调用 g.next() 不 会 有 任何 变化 ， 只 会 返回 { done: true ]。 
以 下 代码 表明 ， 到 达 序 列 的 最 后 时 ， 每 次 调用 g.next 都 会 返回 相同 的 结果 。 











function* generator() { 

yield 'only' 
} 
const g = generator() 
console.log(g.next()) 
// <- { done: false, value: 'only' } 
console.log(g.next()) 
// <- { done: true } 
ConsoLe.Log(g.next()) 
// <- { done: true } 
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4.3.3 将 生成 器 混入 可 和 迭代 对 象 
我 们 来 快速 回顾 一 下 生成 器 。 生 成 器 函数 被 调用 时 会 
next 方法 ， 用 于 返回 序列 中 的 下 一 个 元 素 。next 方法 








返 
返 











回 生成 器 对 象 。 生 成 器 对 象 有 一 个 
回 的 对 象形 式 为 { vatue，done }。 


以 下 示例 定义 了 一 个 生成 无 穷 斐 波 纳 契 序列 的 生成 器 。 然 后 我 们 实例 化 了 生成 器 对 象 并 读 


取 序 列 中 的 前 8 个 值 。 


function* fibonacci() { 
let previous = 0 
let current = 1 
while (true) { 
yield current 
const next = current + previous 
previous = current 
current = next 
} 
} 
const g = fibonacci() 
console.log(g.next()) // <- { value: 1, done: false } 
console.log(g.next()) // <- { value: 1, done: false } 
console.log(g.next()) // <- { value: 2, done: false } 
console.log(g.next()) // <- { value: 3, done: false } 
console.log(g.next()) // <- { value: 5, done: false } 
console.log(g.next()) // <- { value: 8, done: false } 
console.log(g.next()) // <- { value: 13, done: false } 
console.log(g.next()) // <- { value: 21, done: false } 


用 可 迭代 对 象 来 实现 与 此 类 似 。 只 不 过 它 要 遵守 协议 ， 返 回 的 对 象 必 须 有 一 个 next 方法 。 
这 个 方法 应 该 返回 形 如 {f value， 人 失 代 对 象 








fibonacci， 它 与 前 面 生 成 器 的 功能 大 致 相 同 。 


const fibonacci = { 
[Symbol.iterator]() { 
let previous = 0 
let current = 1 
return { 
next() { 
const value = current 
const next = current + previous 
previous = current 
current = next 
return { value, done: false } 
} 
} 
3 
} 
const sequence = fibonacci[Symbol.iterator]() 
console.log(sequence.next()) // <- { value: 1, done: false } 
console.log(sequence.next()) // <- { value: 1, done: false } 
console.log(sequence.next()) // <- { value: 2, done: false } 





和 迭代 与 流程 控制 


console 
console 
console 
console 
console 


再 次 强调 ， 可 迭代 对 象 会 返 





.Log(sequence .next()) // <- 
.Log(sequence .next()) // <- 
.Log(sequence .next()) // <- 
.Log(sequence .next()) // <- 
.Log(sequence .next()) // <- 





{ value: 
{ value: 
{ value: 
{ value: 
{ value: 


3, done: false } 
5, done: false } 
8, done: false } 
13, done: false } 
21, done: false } 


回 一 个 有 next 方法 的 对 象 ， 生 成 器 函数 也 会 这 么 做 。next 方 


法 应 该 返回 一 个 形 如 { value，done ] 的 对 象 ， 生 成 器 函数 也 一 样 。 如 果 我 们 修改 可 迭代 
对 象 fibonacct， 让 它 的 Symbol.iterator 属性 指向 一 个 生成 器 函数 ， 会 怎么 样 呢 ? 事实 证 





明 ， 它 照样 会 工作 。 





以 下 示例 表明 ， 可 迭 
这 个 可 迭代 对 象 与 前 
使 用 生成 器 函数 中 使 月 














const fibonacci = { 
* [Symbol.iterator]() { 
let previous = 0 
let current = 1 
while (true) { 
yield current 
const next = current + previous 
previous = current 
current = next 


} 
} 
} 


const g = fibonacci[Symbol.iterator]() 


console 


console. 
console. 
console. 
console. 


console 


console. 


console 


.log(g. 
log(g. 
log(g. 
log(g. 
log(g. 
.log(g. 
log(g. 
.log(g. 


next()) // <- { value: 1 
next()) // <- { value: 
next()) // <- { value: 
next()) // <- { value: 
next()) // <- { value: 
next()) // <- { value: 
next()) // <- { value: 
next()) // <- { value: 


Ls 
25 
35 
5 


8， 


done: 
done: 
done: 
done: 
done: 


done 





代 对 象 fibonacci 使 用 一 个 生成 右 国 数 来 定义 自己 如 何 被 迭代 。 注 意 ， 
面 的 fibonacci 生成 器 函数 几乎 完全 一 样 。 不 仅 如 此 ， 我 们 仍然 可 以 
目的 所 有 语义 ， 如 yield、yield*。 


false } 
false } 
false } 
false } 
false } 
: false } 


13, done: false } 
21, done: false } 


此 外 ， 可 迭代 协议 同样 有 效 。 为 了 验证 这 一 点 ， 我 们 可 以 使 用 for. .of 这 样 的 构造 函数 ， 
而 非 手工 创建 的 生成 器 对 象 。 为 了 防止 无 穷 序列 造成 程序 崩溃 ， 以 下 示例 中 的 for..of 循 
环 添 加 了 “断路 保护 ”装置 。 





for (const value of fibonacci) { 
console.log(value) 
if (value > 20) { 

break 


} 
} 
// <- 1 
// <- 1 
// <- 2 
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// <- 3 
// <- 5 
// <- 8 
// <- 13 
// <- 21 
接 下 来 我 们 再 看 几 个 更 接地 气 的 示例 ， 看 看 在 迭代 树 形 数据 结构 时 使 用 生成 器 代码 会 有 多 


4.3.4 ”使 用 生成 器 遍历 树 
基于 树 形 数 据 结 构 的 算法 并 不 好 理解 ， 因 为 其 中 经 常 涉及 递归 。 以 下 代码 定义 了 一 个 Node 
类 ， 它 有 一 个 value 以 及 任意 个 数 的 子 节 点 。 














class Node { 
constructor(valuye, ...children) { 
this.vaLue = value 
this.children = children 
} 
} 


我 们 可 以 使 用 深度 优先 的 搜索 算法 来 遍历 树 ， 也 就 是 优先 进入 树 形 结构 中 更 深 的 层次 ， 直 
到 没有 子 节 点 为 止 。 在 以 下 的 树 形 结构 中 ， 深 度 优先 的 搜索 算法 会 按照 从 1~19 的 顺序 造 
访 每 个 节点 。 


const root = new Node(1， 
new Node(2), 
new Node(3， 
new Node(4， 
new Node(5， 
new Node(6) 
)， 
new Node(7) 
) 
)， 
new Node(8, 
new Node(9) ， 
new Node(10) 
) 
) 


要 想 实现 深度 优先 的 遍历 算法 ， 可 以 定义 一 个 生成 器 函数 ， 使 其 返回 当前 闻 点 的 值 ， 然 
后 再 迭代 其 子 节 点 。 具 体 就 是 用 yield* 操作 符 来 拼接 和 锡 代 器 递归 的 结果 ， 返 回 序列 中 的 
一 项 。 























function* depthFirst(node) { 
yield node.value 
for (const child of node.children) { 
yield* depthFirst(child) 
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} 


} 
console.log([...depthFirst(root)]) 
// = [1, 2， 3 4， 5， 6， 7， 8， 9， 10] 





另 一 种 方式 是 使 用 上 面 的 depthFirst 生成 器 作为 和 迭代 器 ， 将 Node 转换 成 可 友 代 对 象 
(类 )。 以 下 代码 也 利用 了 child 是 Node 这 一 点 ， 即 child 也 是 一 个 可 迭代 对 象 的 事实 。 因 
此 才能 用 yield* 返回 作为 父 节 点 元 素 的 chitd 的 可 友 代 序列 。 

















class Node { 

constructor(value, ...children) { 
this.value = valuye 
this.children = children 

} 

* [Symbol.iterator]() { 
yield this.value 
for (const child of this.children) { 

yield* child 

} 

} 


consoLe.Log([...root]) 

// <- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
如 果 想 要 使 用 宽度 优先 的 算法 ， 那 么 可 以 将 迭代 器 修改 成 以 下 代码 那样 。 这 里 使 用 了 “ 先 
进 先 出 ”队列 来 保存 尚未 访问 的 节点 。 达 代 的 每 一 步 都 从 root 节点 开始 ， 我 们 会 打印 当前 
页 点 的 值 ， 并 将 其 所 有 子 元 素 推 到 队列 中 。 子 元 素 始终 会 追加 到 队 尾 ， 但 我 们 是 从 队列 开 
头 取 元 素 的 。 这 意味 着 我 们 会 先 将 某 一 层次 的 节点 都 遍历 完 ， 然 后 再 进入 下 一 层 。 




















class Node { 
constructor(value, ...children) { 
this.value = valuye 
this.children = children 


* [Symbol.iterator]() { 
const queue = [this] 
while (queue.length) { 
const node = queue.shift() 
yield node.vaLue 
queue.push(...node.children) 
} 
} 


consoLe.Log([...root]) 
// 党 = [1， 2， 3 8， 4， 9 10， 5》 7， 6] 





极 强 的 表达 力 使 得 生成 器 非常 有 用 ， 但 我 们 可 以 用 返 代 器 协议 来 定义 一 个 按照 自己 的 想法 
迭代 的 序列 。 在 碰 到 某 个 树 形 结构 包含 几 千 个 节点 ， 且 出 于 性 能 考虑 需要 节 疲 迁 代 操作 
时 ， 生 成 器 是 非常 方便 的 。 








4.3.5 ”传递 生成 器 函数 

到 目前 为 止 ， 我 们 的 讨论 一 直 围 绕 如 何 通过 生成 器 构建 方便 使 用 的 序列 进行 。 生 成 器 也 可 
以 作为 一 段 代码 的 接口 ， 至 于 生成 器 函数 如 何 被 迭代 ， 则 由 这 段 代 码 控制 。 

我 们 将 在 本 节 编 写 一 个 生成 器 图 数 ， 并 直接 将 它 传 递 给 一 个 方法 ， 这 个 方法 会 志 历 生成 
器 ， 并 使 用 其 序列 中 的 元 素 。 乍 一 看 你 可 能 会 觉得 这 样 编写 代码 有 点 不 合 常规 。 事 实 上 ， 
很 多 基于 生成 器 的 库 都 是 由 用 户 提供 生成 器 的 ， 库 本 身 只 管控 制 迭 代 。 
































以 下 代码 展示 了 我 们 希望 匈 到 的 modeLProvider 方法 的 使 用 方式 。 也 就 是 说 ， 我 们 希望 这 个 
方法 的 用 户 自己 提供 一 个 生成 器 函数 ， 该 函数 要 yield 一 个 模型 不 同属 性 的 访问 路 径 ， 之 
取得 该 模型 中 指定 路 径 的 结果 。 生 成 器 对 象 可 以 通过 g.next(result) 将 结果 传 回 生成 
国 数 。 传 回 生成 器 函数 后 ， 对 yield 表达 式 求 值 的 结果 就 是 生成 器 对 象 传 回 的 result。 
modelProvider(function* () { 
Const items = yield 'cart.items’ 
Const item = items.reduce( 
(left, right) => left.price > right.price ? left : right 

) 

const details = yield ‘products.${ item.id }. 

console.log(details) 


}) 
用 户 提 供 的 生成 器 每 次 yield 一 个 路 径 后 ， 生 成 器 函数 就 会 暂停 执行 ， 直 到 进 代 器 再 次 调用 
9g.next()， 这 个 过 程 甚至 可 以 在 后 台 异 步 进行 。 以 下 是 modelProvider 方法 的 实现 ， 其 代码 
负责 迭代 生成 器 返回 的 路 径 序列 。 注 意 ，data 通过 g.next(data) 又 传 回 了 生成 器 国 数 。 
































问 二 
































const modeL = { 


cart: { 
items: [item1, ..., itemN] 

后 

products: { 
product1: { ... }, 
productN: { ... } 

} 

} 


function modelProvider(paths) { 
const g = paths() 
pull() 
function pull(data) { 
const { value, done } = g.next(data) 
if (done) { 
return 
} 
const crumbs = value.split('.') 
const data = crumbs.reduce(followCrumbs, model) 
pull(data) 
} 
} 


function followCrumbs(data, crumb) { 





迭代 与 流程 控制 | 101 





if (!data || !data.hasOwnProperty(crumb)) { 
return null 


return data[crumb] 


} 


让 用 户 提供 生成 器 函数 的 最 大 好 处 是 ， 通 过 为 他 们 提供 yield 关键 字 产 生 了 一 种 可 能 性 : 
如 果 返 代 器 在 两 次 9.next() 调用 之 间 执 行 异步 操作 ， 那 么 它们 的 代码 是 可 以 暂停 的 。 下 一 
矶 将 探讨 生成 器 在 编写 异步 代码 时 的 用 处 。 




















4.3.6 ”人 处理 异 步 流 


回 到 前 面向 modelProvider 传 入 用 户 提供 的 生成 器 的 示例 。 如 果 需 要 异步 请 求 获取 模型 ， 
那 应 该 如 何 修改 代码 呢 ? 先 说 生成 器 这 边 ， 如 果 和 迭代 路 径 序 列 的 方式 变 成 异步 ， 用 户 提供 
的 国 数 也 不 用 进行 修改 。 生 成 器 已 经 支持 在 查询 模型 时 暂停 了 ， 这 正 是 生成 器 的 优点 的 
体现 。 需 要 修改 的 只 是 向 某 个 服务 请 求 相 关 路 径 的 查询 结果 ， 再 通过 某 种 方式 返回 这 个 结 
果 ， 然 后 在 生成 器 对 象 上 调用 g.next 以 通过 居间 的 yield 语句 将 结果 传 回 生成 器 国 数 。 





















































假设 以 下 modelProvider 的 使 用 方式 不 变 。 


modelProvider(function* () { 
Const items = yield 'cart.items’' 
const item = items.reduce( 
(left, right) => left.price > right.price ? left : right 
) 
const details = yield ‘products.${ item.id }° 
console.log(details) 


}) 


我 们 要 用 fetch 请 求 HTTP 资源 ， 它 返回 的 是 一 个 Promise。 注 意 ， 我 们 不 能 在 异步 执行 
流 中 使 用 for. .of 来 遍历 序列 ， 它 只 能 用 于 同步 模式 。 








以 下 代码 会 将 请 求 通过 HITP 发 送 到 模型 ， 现 在 由 服务 器 人 负责 查询 交付 结果 。 除 了 保存 相 
关 的 用 户 认证 数据 (如 cookie) ， 客 户 端 不 用 再 记录 状态 了 。 


function modelProvider(paths) { 
const g = paths() 
pull() 
function pull(data) { 
const { value, done } = g.next(data) 
if (done) { 
return 
} 
fetch( /model?query=${ encodeURIComponent(vaLue) }°) 
.then(response => response.json()) 
.then(data => pull(data)) 





务必 记 住 ， 在 对 yield 表达 式 求 值 时 ， 生 成 器 国 数 会 暂停 执行 ， 直 到 迭代 器 请 求 序列 中 的 下 一 
项 〈 这 个 示例 中 就 是 要 查询 的 模型 的 下 一 个 路 径 ) 时 才 会 恢复 执行 。 就 此 而 言 ， 即 使 yietd 会 
在 下 一 次 调用 g.next 之 前 暂停 函数 执行 ， 生 成 器 函数 中 的 代码 看 起 来 也 像 是 同步 的 。 


虽然 生成 器 可 以 让 我 们 写 出 像 同步 代码 那样 的 异步 代码 ， 但 仍然 存在 问题 。 如 果 迭 代 过 程 
中 出 错 ， 如 何 处 理 错误 呢 ? 比如 ， 要 是 HTTP 请 求 失败 ， 如 何 通 知 生 成 器 ， 然 后 在 生成 器 
国 数 中 处 理 错误 呢 ? 


4.3.7 在 生成 器 上 抛 出 错误 

我 们 知道 生成 器 有 一 个 g.throw 方法 ， 用 于 在 暂停 期 间 报告 错误 。 但 如 果 不 分 析 用 户 提供 
的 生成 器 (此 时 由 于 yield 导致 暂停 ， 它 还 保持 着 对 看 似 同步 的 函数 的 控制 )， 可 能 很 难 找 
到 应 该 在 哪里 调用 g.throw。 当 我 们 将 目光 转移 到 yield 表达 式 之 间 的 流 控制 代码 ( 正 是 
这 里 可 能 出 错 ) 时 ， 在 哪里 调用 g.throw 就 显而易见 了 。 如 果 处 理 序 列 中 的 某 一 项 时 发 生 
错误 ， 那 么 使 用 生成 器 的 代码 应 该 将 错误 抛 到 生成 器 中 。 


对 于 modelProvider 来 说 ， 和 迭代 器 可 能 会 遭遇 网 络 问题 (或 格式 不 正确 的 HTTP 响应 ) ， 因 
而 无 法 拿 到 模型 的 查询 结果 。 以 下 代码 给 fetch 添加 了 一 个 错误 回调 ， 它 会 在 response. 
json() 出 错时 执行 ， 此 时 我 们 会 在 生成 器 上 抛 出 异常 。 
























































fetch(` /modeL?query=Sft encodeURIComponent(value) }°) 
.then(response => response.json()) 
.then(data => pull(data)) 
.catch(err => g.throw(err)) 





调用 g.next 时 ， 生 成 器 函数 的 代码 会 恢复 执行 。 调 用 g.throw 也 会 让 生成 器 函数 恢复 执 
行 ， 只 不 过 恢复 执行 后 会 导致 yield 表达 式 抛 出 异常 。 生 成 器 中 未 处 理 的 异常 会 导致 狗 代 
终止 ， 因 为 根本 无 法 到 达 其 他 yield 表达 式 。 生 成 器 函数 可 以 将 yield 表达 式 包装 在 try/ 
catch 块 中 ， 从 而 恰当 地 处 理 和 迭代 代码 转发 过 来 的 异常 ， 如 下 所 示 。 这 样 后 面 的 yield 表 
达 式 也 会 正常 地 暂停 生成 器 执行 ， 将 控制 权 再 次 交 给 迭代 代码 。 













































































modelProvider(function* () { 
try { 
console.log('items in the cart:', yield 'cart.items') 
} catch (e) { 
console.error('uh oh, failed to fetch model.cart.items!', e) 
} 
try { 
console.log( ‘these are our products: ${ yield 'products' }°) 
} catch (e) { 
console.error('uh oh, failed to fetch model.products!', e) 
} 
}) 


虽然 可 以 通过 生成 器 函数 暂停 执行 ， 然 后 异步 恢复 ， 但 我 们 仍然 可 以 像 在 常规 函数 中 那样 
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使 用 相同 的 错误 处 理 方式 (try、catch 和 throw)。 在 生成 器 
我 们 能 够 像 处 理 同步 代码 那样 处 理 异 步 错误 ， 即 使 迭代 器 











HTTP 请 求 。 


4.3.8 代替 生成 器 返回 


函数 中 使 用 try/catch 块 ， 让 
代码 中 的 yield 表达 式 背 后 有 


除了 g.next 和 9g.throw， 生 成 器 对 象 还 有 一 个 方法 可 以 用 来 决定 生成 器 序列 如 何 被 迭代 : 
g.retrun(vatue)。 这 个 方法 会 恢复 生成 器 函数 的 执行 ， 并 在 原来 yield 语句 的 位 置 执行 
return value， 通 常 这 会 终止 对 生成 器 序列 的 迭代 。 换 句 话 说， 这 与 生成 器 函数 中 有 一 条 


return 语句 效果 相同 。 


function* 
yield 1 
yield 2 
yield 3 

} 

const g 

console 

// <- { 


console 


numbers() { 


numbers() 
.log(g.next()) 

done: false, value: 1 } 
.log(g.return()) 

// <- { done: true } 
console.log(g.next()) 

// <- { done: true } 


考虑 到 g.return(value) 会 在 生成 器 函数 暂停 时 到 达 的 yield 的 位 置 执行 return value, 使 
用 try/finaltLy 块 可 以 避免 立即 终止 迭代 序列 ， 因 为 finalLty 块 内 的 代码 会 在 执行 流 退出 


国 数 前 执行 。 这 意味 着 finally 块 中 的 yield 表达 式 会 继续 


function* numbers() { 
try { 
yield 1 
} finally { 
yield 2 
yield 3 
} 
yield 
yield 
} 
const g 
console 
//<-{ 
console 
//<-{ 


console 


4 
5 


numbers() 
.log(g.next()) 

done: false, value: 1 } 
.log(g.return(-1)) 

done: false, value: 2 } 
.log(g.next()) 

// <- { done: false, value: 3 } 
console.log(g.next()) 

// <- { done: true, value -1 } 





回 送 序列 中 的 值 ， 如 下 所 示 。 





接 下 来 我 们 再 看 一 个 简单 的 生成 器 函数 ， 它 会 先 回 送 儿 个 值 











， 然 后 执行 return 语句 。 








function* numbers() { 
yield 1 
yield 2 
return 3 
yield 4 
} 


如 有 果 使 用 扩展 操作 符 、Array.fronm 或 for. .of 来 欠 代 这 个 生成 器 ， 那 么 无 论 return 语句 放 
在 什么 位 置 ， 结 果 中 都 不 会 包含 返回 的 value， 如 下 所 示 。 








console.log([...numbers()]) 
// <- [1, 2] 
console.log(Array.from(numbers())) 
// <- [1, 2] 
for (const number of numbers()) { 
console.log(number) 
// <- 1 
// <- 2 
} 


之 所 以 会 这 样 ， 是 因为 g.return 或 return 语句 返回 给 返 代 器 的 结果 中 包含 done: true 这 
个 标志 ， 以 表明 该 序列 已 经 结束 。 就 算 返 回 的 结果 中 确实 也 包含 一 个 序列 的 value, 但 上 
述 方法 都 会 忽略 它 。 由 此 看 来 ， 对 生成 器 而 言 ，return 语句 应 该 主要 用 于 提供 “断路 保 
护 ” 功 能 ， 而 不 是 提供 序列 中 的 最 后 一 个 值 。 


















































取得 生成 器 返回 值 的 唯一 方法 是 ， 和 迭代 生成 器 对 象 时 将 结果 包含 done: true 的 情况 考虑 在 
内 ， 如 下 所 示 。 


const g = numbers() 
console.log(g.next()) 

// <- { done: false, value: 1 } 
console.log(g.next()) 

// <- { done: false, value: 2 } 
console.log(g.next()) 

// <- { done: true, value: 3 } 
console.log(g.next()) 

// <- { done: true } 


由 于 yield 表达 式 和 return 语句 很 容易 混淆 ， 最 好 不 要 在 生成 器 中 使 用 return， 除 非 有 方 


法 需要 故意 利用 yield 和 return 的 区 别 。 当 然 ， 终极 目标 还 是 要 提取 一 层 抽象 ， 以 简化 开 
发 的 工作 量 。 











下 一 节 将 利用 yield 和 return 的 区 别 来 创建 一 个 迭代 器 ， 然 后 基于 相同 的 生成 器 函数 实现 
输入 和 输出 。 


4.3.9 ”基于 生成 器 的 异步 |/O 
以 下 代码 展示 了 一 个 简单 的 生成 器 函数 ， 其 作用 一 目 了 然 ， 前 两 行 表示 输入 来 源 ， 第 三 行 
表示 输出 目标 。 这 个 假想 的 方法 可 用 于 从 回 送 (yield) 端 取得 产品 信息 ， 最 终 将 这 些 信息 
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保存 到 返回 (return) 端 。 对 于 这 个 接口 而 言 ， 用 户 不 必 花 时 间 思 考 如 何 读 写 信 息 (这 一 
点 非常 重要 )， 只 要 提供 来 源 和 目标 ， 剩 下 的 由 底层 实现 负责 就 行 了 。 





saveProducts(function* () { 
yield '/products/modern-javascript' 
yield '/products/mastering-modular-javascript' 
return ' /wishLists/books' 


}) 


不 仅 如 此 ，saveProducts 方法 还 可 以 返回 一 个 Promise， 该 Promise 会 在 订单 被 推送 到 返回 
端 后 得 到 解决 。 换 名 话说 ， 用 户 可 以 在 订单 被 记录 后 执行 回调 。 而 且 ， 生 成 器 函数 也 应 该 
通过 yield 表达 式 接收 商品 数据 ， 这 些 数据 可 以 通过 调用 g.next 传 进来 。 











saveProducts(function* () { 
const p2 = yield '/products/modern-javascript' 
const p2 = yield '/products/mastering-modular-javascript' 
return ' /wishLists/books' 

}).then(response => { 


// 保存 商品 列表 后 继续 执行 其 他 操作 
}) 














通过 引入 条 件 逻 辑 ， 可 以 将 saveProducts 的 目标 设 为 用 户 的 购物 车 ， 而 不 是 心愿 列表 。 


saveProducts(function* () { 
yield '/products/modern-javascript' 
yield '/products/mastering-modular-javascript' 
if (addToCart) { 
return '/cart' 


} 


return ' /wishLists/books' 


}) 


之 所 以 采用 这 种 “输入 和 输出 ”全 包 的 方式 ， 是 因为 这 样 即便 实现 有 各 种 各 样 的 变化 ， 
API 也 可 以 基本 保持 不 变 。 输 入 资源 可 以 通过 HTTP 请 求 或 从 某 个 临时 缓存 取得 ， 可 以 一 
个 个 获取 (或 同时 获取 )， 或 者 通过 一 种 机 制 将 所 有 回 送 的 资源 组 合 为 一 个 HTTP 请 求 。 

次 取 一 个 与 组 合 为 一 个 请 求 在 语义 上 有 区 别 ， 但 在 实现 变化 如 此 之 大 的 情况 下 ，API 也 
不 用 变化 。 























接 下 来 我 们 会 一 步 步 实 现 saveProducts。 首 先 ， 以 下 代码 展示 了 如 何 通 过 fetch 及 其 基于 
Promise 的 API 发 送 HTTP 请 求 ， 以 获取 第 一 个 回 送 商 品 的 JSON 信息 。 


function saveProducts(productList) { 
const g = productList() 
const item = g.next() 
fetch(item.value) 
.then(res => res.json()) 
.then(product => {}) 








要 想 连续 异步 地 取得 每 个 商品 的 信息 (每 次 只 取 一 个 )， 我 们 可 以 将 fetch 调用 封装 在 一 个 
递归 函数 中 ， 以 便 在 取得 每 个 商品 的 信息 后 再 次 调用 它 。 这 样 每 一 步 取得 一 个 商品 ， 然 后 调 
用 g.next 来 恢复 生成 器 函数 的 执行 ， 让 它 回 送 序 列 中 的 下 一 项 ， 然 后 再 用 该 项 调用 more。 




















function saveProducts(productList) { 
const g = productList() 
more(g.next()) 
function more(item) { 
if (item.done) { 
return 


fetch(item.value) 
.then(res => res.json()) 
.then(product => { 
more(g.next(product)) 
}) 
} 
} 


这 样 我 们 就 能 取得 所 有 输入 每 次 一 个 )， 并 通过 g.next(product) 将 结果 返回 给 生成 器 。 
为 了 利用 return 语句 ， 我 们 可 以 将 取得 的 商品 信息 保存 在 一 个 临时 数组 中 ， 等 迭代 器 取得 
序列 被 标记 为 结束 的 item 时 ， 再 用 P0ST 方法 将 这 个 数组 发 送 到 iten 表示 的 输出 目标 上 。 


























function saveProducts(productList) { 
const products = [] 
const g = productList() 
more(g.next()) 
function more(item) { 
if (item.done) { 
save(item.value) 
} elsef{ 
details(item.value) 
} 
} 
function details(endpoint) { 
fetch(endpoint) 
.then(res => res.json()) 
.then(product => { 
products.push(product) 
more(g.next(product)) 
}) 
} 
function save(endpoint) { 
fetch(endpoint, { 
method: 'POST', 
body: JSON.stringify({ products }) 
}) 
} 
} 


这 一 步 取得 的 商品 信息 会 缓存 在 products 数组 中 ， 传 回 生 成 器 函数 ， 并 最 终 保存 到 return 
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语句 返回 的 输出 目标 。 








前 面 我 们 提 到 saveProducts 可 以 返回 一 个 Promise， 这 样 保存 之 后 还 可 以 继续 执行 回调 。 
正如 前 面 所 说 的 ，fetch 返回 Promise。 只 要 给 每 个 国 数 调 用 都 补 上 return 语句 ， 就 可 以 
让 saveProducts 返回 more 的 输出 结果 ， 而 后 者 又 会 返回 save 或 details 的 输出 。save 和 
details 都 返回 fetch 调用 创建 的 Promise。 此 外 ， 每 个 details 调用 都 会 在 自己 的 Promise 
中 返回 调用 more 的 结果 。 这 意味 着 最 初 的 fetch 在 第 二 个 fetch 兑现 前 不 会 被 部 现 ， 于 是 
我 们 就 实现 了 Promise 链 。 最 终 ， 所 有 的 Promise 会 在 save 被 调用 并 解决 后 得 到 解决 。 





















































function saveProducts(productList) { 
const products = [] 
const g = productList() 
return more(g.next()) 
function more(item) { 
if (item.done) { 
return save(item.value) 


return details(item.value) 
} 
function details(endpoint) { 
return fetch(endpoint) 
.then(res => res.json()) 
.then(product => { 
products.push(product) 
return more(g.next(product)) 
}) 
} 
function save(endpoint) { 
return fetch(endpoint, { 
method: 'POST', 
body: JSON.stringify({ products }) 
}) 
.then(res => res.json()) 
} 
} 


你 可 能 已 经 注意 到 了 ， 以 上 实现 并 没有 硬 编码 任何 重要 的 操作 。 也 就 是 说 ， 只 要 有 有 零 个 
或 多 个 输入 ， 而 你 希望 将 它们 发 送 到 一 个 输出 ， 那 么 就 可 以 使 用 这 种 通用 的 输入 和 输出 
模式 。 用 户 看 到 的 则 是 一 个 简 简 单单 的 、 一 目 了 然 的 方法 ， 他 们 只 要 yield 输入 来 源 ， 
return 输出 目标 就 行 了 。 此 外 ， 使 用 Promise 也 让 用 户 可 以 继续 连 级 更 多 操作 。 这 样 一 来 ， 
我 们 就 可 以 将 容易 搞 错 的 条 件 逻 辑 和 执行 流 的 控制 权 和 掌握 在 自己 手 里 ， 因 为 执行 流 已 经 抽 
象 到 saveProducts 方法 的 迭代 机 制 中 了 。 




















到 目前 为 止 ， 我 们 已 经 讨论 了 很 多 流 控制 机 制 : 回调 、 事 件 、Promise、 赤 代 器 和 生成 器 。 
接 下 来 的 两 节 将 探讨 async/awaitt、 异 步 选 代 器 和 异步 生成 器 ， 它 们 都 构筑 在 混用 前 面 几 种 
流 控制 机 制 的 基础 之 上 。 














4.4 ”异步 函数 


Python 和 C# 等 语言 都 已 经 有 了 async/await。 在 ES2017 中 ，JavaScript 也 提出 了 可 用 于 描 
述 异 步 操作 的 原生 语法 。 


接 下 来 我 们 将 快速 比较 一 下 Promise、 回 调和 生成 器 。 随 后 再 看 看 JavaScript 中 的 异步 函 
数 ， 看 看 它 如 何 确保 代码 的 可 读 性 。 


4.4.1 各 种 异步 代码 
假设 有 如 下 代码 。 这 里 我 们 将 一 个 fetch 请 求 包装 在 一 个 getRandomArticle 函数 中 。 返 回 
的 Promise 中 是 JSON 格式 的 响应 体 。 如 果 失 败 ， 则 执行 标准 的 失败 逻辑 。 








function getRandomArticle() { 
return fetch('/articles/random', { 
headers: new Headers({ 
Accept: 'application/json' 
}) 
}) 
.then(res => res.json()) 


} 





以 下 代码 展示 了 如 何 使 用 getRandomArticle 函数 。 我 们 构造 了 一 个 Promise， 它 取得 表 
示 文 章 的 JSON 对 象 ， 然 后 将 其 传递 给 一 个 异步 视图 泻 染 函数 renderView， 该 函数 返回 
HTML 页 面 。 获 取 HTML 页 面 后 ， 我 们 用 该 HTML 内 容 替 换 当 前 页 面 。 为 了 避免 静默 错 
误 ，catch 子 句 会 通过 console.error 打印 出 错 原因 。 












































getRandomArticle() 
.then(model => renderView(model)) 
.then(html => setPageContents(html)) 
.then(() => console.log('Successfully changed page!')) 
.Catch(err => console.error(err)) 





连 级 起 来 的 Promise 会 导致 调试 困难 ， 找 出 流程 报错 的 根本 原因 是 一 个 艰巨 的 挑战 。 
Promise 代码 属于 写 起 来 容易 、 读 起 来 难 的 那 种 类 型 。 因 此 ，Promise 代码 也 会 提高 维护 
成 本 。 
如 果 这 里 使 用 简单 的 JavaScript 回调 ， 那 么 代码 中 就 会 出 现 重复 ， 如 下 所 示 。 与 此 同时 ， 
我 们 也 会 掉 进 “回调 地 狱 ”: 异步 代码 流 中 的 每 一 步 都 缩 进 了 一 级 ， 步 数 越 多 ， 代 码 就 越 
难 理解 。 



























































getRandomArticle((err, model) => { 
if (err) { 
return console.error(err) 


renderView(model, (err, html) => { 





迭代 与 流程 控制 | 109 





if (err) { 
return console.error(err) 


setPageContents(htmL，err => { 
if (err) { 
return console.error(err) 


console.log('Successfully changed page!') 
}) 
}) 
}) 


当然 ， 有 些 库 可 以 辅助 处 理 “ 回 调 地 狱 ”以 及 重复 性 错误 。 比 如 ，async 库 利 用 了 常规 
的 回调 ， 其 中 第 一 个 参数 也 是 错误 信息 。 使 用 其 waterfall 方法 可 以 使 前 面 的 代码 变 得 
更 简洁 。 


async.waterfall([ 
getRandomArticle, 
renderView, 
SetPageContents 
]，(err，htmL) => { 
if (err) { 
return console.error(err) 









































console.log('Successfully changed page!') 
}) 


下 面 再 看 一 个 类 似 的 示例 ， 但 这 次 使 用 生成 器 。 以 下 代码 是 基于 getRandomArticle 的 逻辑 
改写 的 ， 唯 一 的 目的 就 是 换 一 种 实现 方式 使 用 生成 器 。 





7 

















function getRandomArticle(gen) { 
const g = gen() 
fetch('/articles/random', { 
headers: new Headers({ 
Accept: 'application/json' 
}) 
}) 
.then(res => res.json()) 
.then(json => g.next(json)) 
.catch(err => g.throw(err)) 


} 


以 下 代码 展示 了 如 何 通过 一 个 Yietd 表达 式 从 getRandomArticte 中 获取 json。 虽 然 代 
码 看 起 来 像 是 同步 的 ， 但 其 中 封装 了 一 个 生成 器 。 要 想 添加 更 多 步骤 ， 就 得 大 幅 修 改 
getRandonArttcte， 以 便 它 可 以 返回 我 们 想 要 的 结果 ， 同 时 还 要 对 生成 器 函数 进行 必要 的 
修改 ， 以 便 接收 更 新 后 的 结果 。 

















getRandomArticle(function* printRandomArticle() { 
const json = yield 
// render view 


}) 





在 这 种 情况 下 ， 使 用 生成 器 也 许 并 不 是 最 直观 的 实现 方式 ， 而 且 这 只 是 将 复杂 性 转移 了 。 
相 比 之 下 ， 或 许 我 们 还 是 应 该 继续 使 用 Promise。 











也 


除了 引入 不 直观 的 代码 ， 和 迭代 器 代码 也 会 与 所 使 用 的 生成 器 函数 高 度 耦 合 。 这 意味 着 ， 只 
要 给 生成 器 添加 新 的 yield 表达 式 ， 就 得 修改 迭代 器 。 


此 时 ， 异 步 函 数 是 一 个 更 好 的 选择 。 


4.4.2 ”使 用 async/await 


async 国 数 兼顾 了 基于 Promise 的 实现 和 生成 器 风格 的 同步 写法 。 这 个 方法 的 巨大 优势 是 ， 
你 根本 不 用 修改 原始 的 getRandomArticle 国 数 ， 只 要 它 返 回 Promise， 能 加 await 就 行 。 








注意 ，await 关键 字 只 能 用 于 标记 为 async 的 异步 函数 内 部 。async 函数 的 原理 与 生成 器 类 
似 ， 只 不 过 是 在 局 部 上 下 文中 挂 起 ， 直 至 Promise 返回 。 如 果 以 await 修饰 的 表达 式 不 是 
Promise， 那 它 会 被 转换 为 Promise。 











以 下 代码 使 用 了 最 初 的 getRandomArticle 国 数 ， 仍 然 以 Promise 为 基础 。 然 后 将 model 传 
递 给 另 一 个 异步 函数 renderView， 这 个 国 数 又 返回 一 小 段 HIML， 接 着 再 更 新 页 面 。 注 
意 ， 在 标记 为 async 的 函数 中 等 待 多 个 Promise 逐个 解决 时 ， 我 们 使 用 了 try/catch 来 处 理 
错误 。 这 完全 就 是 同步 代码 的 写法 ， 但 那儿 个 函数 又 确实 是 异步 执行 的 。 
































async function read() { 
try { 
const model = await getRandomArticle() 
const html = await renderView(model) 
await setPageContents(html) 
console.log('Successfully changed page!') 
} catch (err) { 
console.error(err) 
} 
} 


read() 
异步 函数 始终 会 返回 Promise。 如 果 有 未 捕获 的 异常 ， 那 么 返回 的 Promise 的 结果 是 被 拒 


绝 ， 否则， 返回 的 Promise 将 以 返回 值 被 解决 。 利 用 异步 函数 的 这 一 特点 ， 我 们 可 以 将 其 
与 常规 的 Promise 连 级 调用 结合 起 来 。 以 下 代码 展示 了 二 者 的 结合 。 




















async function read() { 
const model = await getRandomArticle() 
const html = await renderView(model) 
await setPageContents(htmL) 
return 'Successfully changed page!' 


} 


read() 
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.then(message => console.log(message)) 
.Catch(err => console.error(err)) 


为 了 让 read 函数 更 有 用 ， 我 们 可 以 让 它 返 回 结果 htmt， 并 允许 使 用 者 使 用 Promise 或 者 另 
一 个 异步 函数 继续 下去。 这样 一 来 ，read 函数 就 只 专注 于 为 视图 提供 HIML 了 。 




















async function read() { 
const model = await getRandomArticle() 
const html = await renderView(model) 
return html 


} 
接 下 来 我 们 可 以 通过 普通 的 Promise 直接 打印 HTML。 


read().then(html => console.log(html)) 





可 见 ， 使 用 异步 函数 实现 连 级 调用 一 点 也 不 难 。 以 下 示例 创建 了 一 个 write 函数 ， 用 于 通 
过 调用 read 实现 连 级 。 














async function write() { 
const html = await read() 
console.log(html) 

} 


那 并 发 的 异步 流程 怎么 办 呢 ? 





4.4.3 ”并 发 异步 流 

在 异步 代码 流 中 ， 并 发 执行 两 个 其 至 更 多 任务 是 常 有 的 事 。 虽 然 异步 函数 可 以 简化 异步 代 
码 的 编写 ,但 代码 一 次 也 只 能 执行 一 个 异步 操作 。 如 果 一 个 函数 包含 多 个 await 表达 式 ， 
那 就 要 每 次 都 挂 起 ， 直 到 Promise 结束 ， 再 轮 到 下 一 个 await 表达 式 执行 。 这 其 实 有 点 类 
似 生 成 器 中 的 yield。 








async function concurrent() { 

const pi = new Promise(resolve => 
setTimeout(resolve, 500, 'fast') 

) 

const p2 = new Promise(resolve => 
setTimeout(resolve, 200, 'faster') 
) 

const p3 = new Promise(resolve => 
setTimeout(resolve, 100, 'fastest') 
) 

const r1 = await p1 // 在 pl 返回 之 前 ， 执 行 流 是 阻塞 的 
const r2 = await p2 

const r3 = await p3 


} 




















我 们 可 以 使 用 Promise.all 解决 这 个 问题 ， 只 创建 一 个 Promise 搭配 一 个 await。 这 样 一 











来 ， 代 码 会 一 直 阻 塞 到 列表 中 的 所 有 Promise 都 解决 ， 也 就 是 它们 可 以 被 并 发 地 解决 。 


以 下 示例 展示 了 如 何 用 一 个 await 挂 起 三 个 可 以 并 发 解决 的 Promise。 由 于 await 挂 起 了 
async 国 数 ， 表 达 式 await Promise.all 最 终 会 解决 为 一 个 结果 数组 。 我 们 可 以 用 解构 分 别 
取出 这 个 数组 中 的 每 个 结果 。 











async function concurrent() { 
const p1 = new Promise(resolve => 
setTimeout(resolve, 500, 'fast') 

) 

const p2 = new Promise(resolve => 
setTimeout(resolve, 200, 'faster') 
) 

const p3 = new Promise(resolve => 
setTimeout(resolve, 100, 'fastest') 
) 

const [ri, r2, r3] = await Promise.all([p1i, p2, p3]) 
console.log(r1, r2, r3) 

// 'fast', 'faster', 'fastest' 


} 





对 于 并 发 任务 ， 我 们 还 可 以 用 Pronise.race 取得 兑现 最 快 的 Promise 返回 的 结果 。 





async function race() { 
const pl = new Promise(resolve => setTimeout(resolve, 500, 'fast')) 
const p2 = new Promise(resolve => setTimeout(resolve, 200, 'faster')) 
const p3 = new Promise(resolve => setTimeout(resolve, 100, 'fastest')) 
Const result = await Promise.race([p1, p2, p3]) 
console.log(result) 
// 'fastest' 


4.4.4 ”错误 处 理 


与 在 普通 的 Promise 中 一 样 ，async 函数 中 的 错误 也 会 被 静默 地 吞 掉 ， 因 为 异步 函数 本 身 被 
包装 在 一 个 Promise 中 。 异 步 函 数 体内 或 await 挂 起 的 异步 任务 抛 出 的 未 捕获 错误 ， 会 导 


致 异步 国 数 返回 的 Promise 被 拒绝 。 


如 果 为 await 表达 式 包 上 一 层 try/catch， 那 么 对 这 部 分 被 包装 起 来 的 异步 函数 代码 而 言 ， 
错误 处 理 是 按照 典型 的 try/catch 语义 进行 的 。 





















































然 ， 这 可 以 看 作 异 步 函 数 的 一 个 优势 。 毕 竞 ， 你 没有 办 法 对 异步 回调 使 用 try/catch， 但 


使 用 Promise 时 倒 可 以 。 从 这 个 意义 上 来 说 ， 异 步 函数 有 点 类 似 于 生成 器 。 通 过 将 函数 执 
行 挂 起 ， 生 成 器 将 异步 流转 换 成 了 同步 代码 ， 因 此 我 们 同样 可 以 使 用 try/catch 结构 。 


此 外 ， 











我 们 还 可 以 在 异步 函数 外 部 给 它 返 回 的 Promise 添加 一 个 .catch 子 句 来 捕获 上 述 异 


常 。 虽 然 错 误 处 理 既 可 以 使 用 try/catch， 也 可 以 使 用 pomise 的 .catch， 但 除非 所 有 人 都 
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非常 了 解 异 步 函 数 是 通过 Promise 封装 的 这 个 语义 ， 以 及 try/catch 能 在 这 里 使 用 的 原因 是 
什么 ， 否 则 这 很 容易 造成 认 知 误区 ， 并 最 终 导致 错误 不 被 处 理 。 








read() 
.then(html => console.log(html)) 
.Catch(err => console.error(err)) 














正如 你 看 到 的 ， 捕 获 、 处 理 (或 转移 ) 异常 及 输出 错误 信息 的 手段 还 是 蛮 多 的 。 














4.4.5 深入 理解 异步 函数 
异步 函数 内 部 同时 利用 了 生成 器 和 Promise。 


async function example(a, b, c) { 


// 函数 体 省 略 














} 








假设 有 以 下 异步 函数 : 


以 下 代码 展示 了 如 何 将 example 函数 声明 转换 为 一 个 简单 的 函数 ， 该 函数 返回 以 一 个 生成 


器 为 参数 的 spawn 辅助 函数 。 





function example(a, b, c) { 
return spawn(function* () { 
// 函数 体 省 略 
}) 


在 生成 器 函数 中 ， 我 们 可 以 假设 yield 在 语法 上 等 价 于 await。 


在 spawn 国 数 中 ，Promise 对 象 包装 了 将 要 单 
码 ， 并 按 顺序 将 值 转发 给 生成 器 代码 (async 矣 








站 步 执行 《由 用 户 代 码 组 成 的 ) 生成 器 函数 的 代 
函数 的 函数 体 )。 





以 下 代码 可 以 帮助 你 理解 async/await 通过 生成 器 迭代 一 连 串 await 表达 式 的 实现 过 程 。 序 
列 中 的 每 个 表达 式 都 被 包装 在 一 个 Promise 中 ， 从 而 与 下 一 个 表达 式 连 接 起 来 。 如 果 整 串 

















Promise 结束 或 者 其 中 一 个 Promise 被 拒绝 ， 





function spawn(generator ) { 
// 将 所 有 代码 包装 在 一 个 Promise 中 
return new Promise((resolve, reject) 
const g = generator() 





// 运行 第 一 步 
step(() => g.next()) 


function step(nextFn) { 
const next = runNext(nextFn) 
if (next.done) { 
// 成 功 结束 ， 解 决 当前 Promise 
resolve(next.value) 
return 








则 底层 的 生成 器 函数 就 会 返回 相应 的 Promise。 


=> { 
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已 


的 Promise 并 运行 下 一 步 








// 未 结束 ， 连 级 返 
Promise 
.resolve(next.value) 
.then( 
value => step(() => g.next(vaLue) ) ， 
err => step(() => g.throw(err)) 


) 





} 


function runNext(nextFn) { 
try { 
// 继续 执行 生成 器 代码 
return nextFn() 
} catch (err) { 
// 以 失败 告终 ， 拒 绝 当前 Promise 
reject(err) 








} 
}) 
} 


我 们 来 看 看 以 下 的 异步 函数 示例 。 为 打印 结果 ， 这 里 也 使 用 了 基于 Promise 的 连 级 。 我 们 
通过 这 个 示例 来 演示 一 遍 实现 流程 。 





async function exercise() { 
Const r1 = await new Promise(resolve => 
setTimeout(resolve, 500, 'slowest') 

) 
Const r2 = await new Promise(resolve => 
setTimeout(resolve, 200, 'slow') 

) 


return [r1，r2] 


} 


exercise().then(result => console.log(result)) 
// <- ['slowest', 'slow'] 





首先 ， 我们 将 这 个 函数 转换 为 基于 前 面 spawn 的 逻辑 。 也 就 是 将 这 个 异步 函数 的 代码 体 包 
装 到 一 个 生成 器 中 ， 再 将 生成 器 传 给 spawn， 同 时 在 生成 器 中 用 yield 代替 await。 














function exercise() { 
return spawn(function* () { 
const rl = yield new Promise(resolve => 
setTimeout(resolve, 500, 'slowest') 
) 
const r2 = yield new Promise(resolve => 
setTimeout(resolve, 200, 'slow') 


) 


}) 
} 


return [ri, r2] 


exercise().then(result => console.log(result)) 
// <- ['slowest', 'slow'] 
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当 带 有 生成 器 的 spawn 函数 被 调用 时 ， 它 会 立即 创建 一 个 生成 器 对 象 ， 并 执行 一 次 step， 
如 下 所 示 。 之 后 只 要 遇 到 (与 异步 函数 中 的 await 表达 式 等 价 的 ) yield 表达 式 ， 就 会 再 
调用 这 个 step 函数 。 




















function spawn(generator) { 
// 将 所 有 代码 包装 在 一 个 Promise 中 
return new Promise((resolve, reject) => { 
const g = generator() 





// 运行 第 一 步 
step(() => g.next()) 
/Ee 

}) 
} 


执行 step 函数 的 第 一 步 是 (通过 runNext 函数 ) 在 try/catch 块 中 调用 nextFn 函数 。 这 会 
恢复 生成 器 函数 的 执行 。 如 果 生 成 器 函数 此 时 报错 ， 则 进入 catch 子 句 ， 异 步 函 数 的 底层 
Promise 就 会 被 拒绝 ， 不 再 继续 下 一 步 ， 如 下 所 示 。 





function step(nextFn) { 
const next = runNext(nextFx) 
fh si 

} 


function runNext(nextFn) { 


try { 
// 继续 执行 生成 器 代码 
return nextFn() 
} catch (err) { 
// 以 失败 告终 ， 拒 绝 当前 Promise 


reject(err) 





} 


回 到 异步 阔 数 ， 以 下 表达 式 的 代码 会 被 求 值 。 没 有 什么 错误 ， 异 步 函 数 的 执行 再 次 被 
挂 起 。 





yield new Promise(resolve => 
setTimeout(resolve, 500, 'slowest') 


) 
这 个 yield 表达 式 返 回 的 结果 在 step 函数 中 由 next.value 接收 ， 而 next.done 表明 生成 
器 序列 是 否 结束 。 对 当前 的 示例 而 言 ， 我 们 在 函数 中 接收 Promise， 并 准确 控制 迭代 顺序 。 
此 时 next.done 是 false， 因 此 我 们 不 会 在 这 一 步 解 决 包装 异步 函数 的 Promise。 这 里 将 
next.value 封装 到 一 个 兑现 的 Promise 中 ， 以 防 没 有 收 到 (或 收 到 的 不 是 ) Promise。 











然后 就 是 等 待 这 个 Promise 被 部 现 或 被 拒绝 。 如 果 这 个 Promise 成 功 部 现 ， 则 将 得 到 的 
value 传递 给 生成 器 ， 同 时 将 生成 器 序列 向 前 推进 一 步 。 如 果 这 个 Promise 被 拒绝 ， 就 会 通 





过 runNext 函数 调用 g.throw 在 生成 器 函数 中 抛 出 异常 ， 这 个 异常 进而 导致 在 runNext 函 
数 中 将 包装 整个 异步 函数 的 Promise 拒绝 掉 。 


function step(nextFn) { 
const next = runNext(nextFn) 
if (next.done) { 
// 成 功 结束 ， 解 决 当前 Promise 
resoLve(next .vaLue) 
return 








// 未 结束 ， 连 组 返回 的 Promtse 并 运行 下 一 步 
.resolve(next.value) 
.then( 
value => step(() => g.next(vaLue) ) ， 
err => step(() => g.throw(err)) 


) 








} 


如 果 只 是 单纯 调用 g.next()， 那 么 只 会 触发 生成 器 函数 继续 执行 。 像 这 样 给 它 传递 一 个 值 
g.next(value) 就 能 让 对 应 的 yield 表达 式 在 求 值 后 取得 这 个 值 (value)。 此 时 我 们 说 的 值 
也 就 是 最 初 的 yield 的 Promise ( 即 'slowest') 兑现 后 得 到 的 值 。 























回 到 生成 器 函数 ， 我 们 将 'stlowest' 赋值 给 r1。 











const rl = yield new Promise(resolve => 
setTimeout(resolve, 500, 'slowest') 


) 


然后 执行 流 会 到 达 第 二 条 yietd 语句 。 这 个 Yietd 表达 式 会 再 次 导致 异步 函数 的 执行 被 村 
起 ， 并 将 一 个 新 Promise 发 给 spawn 迫 代 器 。 





























yield new Promise(resolve => setTimeout(resolve, 200, 'slow')) 
同样 的 过 程 会 重复 出 现 由 于 还 未 执行 到 生成 器 函数 的 最 后 ，next.done 还 是 false。 我 
们 将 收 到 的 Promise 再 包装 进 另 一 个 Promise 中 ， 以 防 收 到 的 Promise 已 经 被 解决 为 slow。 
接着 我 们 再 向 前 推进 生成 器 函数 的 执行 。 
接着 就 到 生成 器 函数 的 return 语句 了 。 此 时 执行 流 在 生成 器 函数 中 被 再 次 挂 起 ， 返 回 的 值 
又 传 给 了 spawn 迭代 器 。 




















return [r1，r2] 
但 此 时 的 next 对 象 如 下 所 示 。 
{ 


value: ['slowest', 'slow'], 
done: true 


} 
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迭代 器 spawn 检查 到 next.done 确实 为 true， 并 立即 将 异步 函数 解决 为 ['slowest'，'slow']。 





if (next.done) { 
// 成 功 结束 ， 解 决 当 前 Promise 
resolve(next.value) 
return 


} 
exercise 返回 的 Promise 成 功 竞 现 ， 最 终 打 印 出 了 异步 函数 返回 的 结果 。 

















exercise().then(result => console.log(result)) 
// <- ['slowest', 'slow'] 

















由 此 来 看 ， 异 步 国 数 不 过 是 一 个 便于 理解 的 预 设 罢 了 : 在 迭代 生成 器 函数 的 过 程 中 ， 它 让 
值 的 传递 尽 可 能 畅通 无 阻 。 作 为 一 个 “语法 糖 " ， 它 的 背后 有 生成 器 函数、 用 于 和 代 yield 
表达 式 序 列 的 spawn 函数 ， 以 及 yield 到 await 的 变换 。 








我 们 还 可 以 从 Promise 的 角度 来 看 异步 函数 。 思 考 以 下 示例 ， 异 步 国 数 要 等 待 国 数 调用 返 
回 的 Promise， 然 后 再 等 待 通过 函数 映射 所 有 用 户 的 结果 。 如 何 用 Promise 实现 上 述 逻 辑 的 
转换 呢 ? 
async function getUserprofiles() { 
const users = await findAllUsers() 
const models = await Promise.all(users.map(toUserModel)) 
const profiles = models.map(model => model.profile) 


return profiles 


} 


以 下 代码 与 getUserProfiles 异步 函数 大 致 等 价 。 注 意 ，await 语句 一 般 都 可 以 改写 成 连 级 
的 Promise， 而 异步 函数 中 的 变量 声明 则 可 以 转移 到 每 个 Promise 的 反应 函数 中 。 考 虑 到 异 
步 函 数 总 是 要 返回 Promtse， 这 里 就 原封 不 动 地 返回 了 。 但 是 我 们 自己 心里 必须 清楚 ， 在 
将 异步 函数 转换 为 Promise 时 ， 应 该 将 Promise.resolve(result) 返回 给 异步 国 数 。 























function getUserProfiLLes() { 
const userPromise = findAllUsers() 
const modelPromise = userPromise.then(users => 
Promise.all(users.map(toUserModel)) 
) 
const profilePpromise = modelPromise.then(models => 
models.map(model => model.profile) 


) 


return profilepromise 


} 
说 到 异步 函数 其 实 是 包 在 生成 器 和 Promise 外 的 一 层 “ 语 法 糖 "， 我 们 一 定 会 想到 : 掌握 
异步 函数 背后 的 这 些 语言 构造 是 非常 重要 的 。 唯 有 如 此 ， 才 能 更 深入 地 理解 如 何 混 合 、 搭 
配 、 联 结 这 些 异 步 执 行 机 制 。 











4.2 贡 解 释 过 ， 和 帮 代 器 以 Symbol.iterator 为 接口 定义 了 应 该 如 何 迭 代 对 象 。 





Const sequence = { 
[Symbol.iterator]() { 
const items = ['i', 't', 'e'’, 'r', 'a', 'b', '1l', 'e'] 


return { 
next: () => ({ 
done: items.Length === 0， 
value: items.shift() 
}) 
} 
} 
} 
你 应 该 也 记得 和 迭代 sequence 对 象 的 方法 有 很 多 种 ， 如 扩展 操作 符 、Array.from、for.. .of， 
答 签 
Fs 


[...sequence] 

// 六 所 Es St 'e', Wp We 'b', 的 本 党 'e'] 
Array.from(sequence) 

A wy EE TE 'e', 'r', 'a', "brs 5 'e'] 


for (const item of sequence) { 
console. log(item) 
// <- 
// <- 
// <- 
// <- 
// <- 
// <- 
// <- 
// <- 

} 


迭代 器 按照 协议 委托 Symbol.iterator 实例 的 next 方法 返回 一 个 有 value 和 done 属性 的 对 
象 。value 属性 表示 序列 中 当前 的 值 ， 而 done 是 一 个 布尔 值 ， 用 于 表明 序列 是 否 结束 。 


m 一 可 onmnnm rr 














4.5.1 异步 迭代 器 

异步 迭代 器 中 的 协议 稍 有 不 同 : next 返回 一 个 Promise， 这 个 Promise 解决 后 会 返回 包含 
value 和 done 属性 的 对 象 。Promise 支持 执行 序列 中 的 异步 任务 ， 即 下 一 步 会 等 上 一 步 解 
决 之 后 再 执行 。 为 避免 重用 Symbol.iterator 可 能 造成 的 认 知 困惑 ，ES6 引入 了 Symbol. 
asyncIterator ， 专 门 用 于 声明 异步 迭代 器 


简单 修改 两 个 地 方 即 可 将 sequence 由 同步 可 友 代 对 象 变 成 异步 可 迭代 对 象 : 一 是 将 Symbol. 
iterator 改 成 SymboL.asyncIterator， 二 是 将 next 方法 中 返回 的 值 包装 在 Promise.resolve 
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中 ， 这 样 就 会 返回 一 个 Promise 了 。 








Const sequence = { 
[SymbolL.asyncIterator]() { 
const items = ['i', 't', 'e'’, 'r', 'a'’, 'b', 'l', 'e'] 


return { 
next: () => Promise.resolve({ 
done: items.Length === 0， 
value: items.shift() 
}) 
} 
} 
} 


举 个 例子 ， 我 们 可 以 创建 一 个 每 隔 指 定时 间 就 增加 一 次 自己 值 的 无 穷 序 列 。 以 下 代码 中 定 
义 了 一 个 interval 函数 来 返回 这 个 异步 无 穷 序 列 ， 每 一 步 都 会 在 指定 的 时 间 duration 过 
去 后 解决 为 下 一 个 值 。 


const interval = duration => ({ 
[Symbol.asyncIterator]: () => ({ 
i: 0， 
next() { 
return new Promise(resolve => 
setTimeout(() => resolve({ 
value: this.it+, 
done: false 
}), duration) 
) 
} 
}) 
}) 























为 了 使 用 这 个 异步 迄 代 器 ， 我 们 可 以 使 用 随同 异步 迭代 器 一 起 引入 的 for await. .of 语 
法 。 这 是 将 异步 代码 写 得 像 同步 代码 的 另 一 种 方法 。 注意， 只 能 在 异步 函数 中 使 用 for 


await. .of 语句 。 


async function print() { 
for await (const i of interval(1000)) { 
console.log(‘${ i } seconds elapsed.') 
} 
} 
print() 





在 撰写 本 书 时 ， 异 步 迭 代 器 以 及 接 下 来 要 介绍 的 异步 生成 器 都 处 于 ECMAScript 的 阶段 3。 


4.5.2 ”异步 生成 器 

与 普通 返 代 器 一 样 ， 异 步 欠 代 器 也 有 对 应 的 异步 生成 器 。 异 步 生成 颖 国 数 与 生成 器 函数 类 
似 ， 区 别 在 于 前 者 也 支持 await 和 for awatit..of 声明 。 以 下 示例 展示 了 一 个 按 固定 间隔 
周期 性 获取 资源 的 生成 器 fetchInterval。 











async function* fetchInterval(duration, ...params) { 
for await (const i of interval(duration)) { 
yield await fetch(...params) 
} 
} 


每 一 步 执行 完 后 ， 异 步 生 成 器 会 返回 一 个 签名 为 { next，return，throw } 的 对 象 ， 其 方法 
返回 的 Promise 会 解决 为 { value，done } 形式 的 对 象 。 普 通 生 成 器 会 直接 返回 { value， 
done } 对象。 











使 用 异步 生成 器 fetchInterval 与 使 用 基于 对 象 的 异步 迭代 器 interval 没什么 区 别 。 以 下 
示例 展示 了 如 何 使 用 fetchInterval 生成 器 获取 HTTP 资源 /api/status， 然 后 再 使 用 返回 
的 JSON 响应 。 完 成 每 一 步 后 都 会 等 1 秒 再 重复 相同 过 程 。 
































async function process() { 
for await (const response of fetchIinterval( 
1000 ， 
'/api/status' 

)) { 


const data = await response.json() 


// 使 用 更 新 后 的 数据 
} 
} 


process() 


正如 4.2.2 市 提 到 的 ， 为 避免 无 穷 循 环 ， 根 据 某 些 条 件 中 断 这 些 序 列 是 非常 重要 的 。 
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JavaScript 数据 结构 很 灵活 ， 任 何 对 象 都 可 以 转换 为 散 列 映射 (hash-map)， 基 中 键 由 字符 
串 构成 ， 可 以 映射 到 任意 值 。 例如 ， 我 们 可 以 用 一 个 对 象 将 npn 包 名 映射 到 它们 的 元 数 
据 ， 如 下 所 示 。 





const registry = {} 
function set(name, meta) { 
registry[name] = meta 


function get(name) { 

return registry[name] 
} 
set('contra', { description: 'Asynchronous flow control' }) 
set('dragula', { description: 'Drag and drop' }) 
set('woofmark', { description: 'Markdown and WYSIWYG editor' }) 


这 种 方法 有 以 下 几 个 问题 








用 户 使 用 _proto _、tostring 或 0bject.prototype 中 的 任意 属性 作为 键 值 会 产生 安全 
问题 ， 并 会 对 使 用 这 个 对 象 造 成 麻烦 。 

使 用 for. .in 进行 迭代 需要 依赖 0bject#hasownProperty 来 确保 属性 不 是 由 继承 而 来 。 
使 用 Object.keys(registry).forEach 对 列表 进行 迭代 过 于 烦琐 。 

键 仅 限于 字符 串 ， 而 不 能 是 DOM 元 素 或 其 他 非 字 符 串 。 























第 一 个 问题 可 以 通过 使 用 前 级 来 解决 ， 但 要 注意 ， 无 论 取 值 还 是 赋值 ， 都 要 通过 函数 添加 
前 缀 才能 避免 出 错 。 
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const registry = {} 
function set(name, meta) { 
registry['pkg:' + name] = meta 


function get(name) { 
return registry['pkg:' + name] 


} 


另外 ， 我 们 还 可 以 使 用 0bject.create(null) 而 非 空 对 象 字面 量 。 在 这 种 情况 下 ， 创 建 的 
对 象 不 会 继承 0bject.prototype， 这 意味 着 它 不 会 受到 __proto__ 等 内 置 属性 的 影响 。 








const registry = Object.create(null) 
function set(name, meta) { 
registry[name] = meta 
} 
function get(name) { 
return registry[name] 


} 
对 于 返 代 ， 我 们 可 以 创建 一 个 返回 键 / 值 对 元 组 的 List 函数 。 


已 





const registry = Object.create(null) 
function list() { 

return Object.keys(registry).map(key => [key, registry[key]]) 
} 


我 们 也 可 以 在 散 列 映射 上 实现 欠 代 器 协议 。 为 了 方便 使 用 ， 这 里 采用 了 一 种 复杂 的 实现 方式 : 
以 下 示例 中 使 用 迭代 器 的 代码 比 前 面 使 用 了 0bject.keys 和 Arrayf#map 方法 的 List 函数 更 难于 
理解 。 然 而 ， 遵 循 迭 代 器 协议 意味 着 不 需要 自 定义 List 函数 ， 从 而 能 够 更 简便 地 访问 列表 。 








const registry = Object.create(null) 
registry[Symbol.iterator] = () => { 
Const keys = Object.keys(registry) 
return { 
next() { 
Const done = keys.Length === 0 
Const key = keys.shift() 
const value = [key, registry[key]] 
return { done, value } 
} 
} 


console.log([...registry]) 

















在 ES5 代码 中 无 法 使 用 非 字 符 串 键 。 好 在 ES6 集合 为 我 们 提供 了 更 好 的 解决 方案 。ES6 集 
合 没 有 键 命名 问题 ， 并 且 改 善 了 集合 行为 ， 比 如 ， 上 面 示例 中 自 定义 散 列 映 射 的 迭代 器 
已 经 成 为 了 ES6 中 的 内 置 方法 。 与 此 同时 ，ES6 集合 允许 使 用 任意 值 作为 键 ， 不 像 常 规 
JavaScript 对 象 那 样 仅 限于 字符 串 键 。 








我 们 来 探讨 一 下 它们 的 实际 使 用 和 内 部 机 制 。 
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5.1 使 用 ES6 map 


ES6 引入 了 Map 等 内 置 集 合 ， 减 少 了 手动 构建 散 列 映射 的 工作 量 。Map 是 ES6 中 的 一 个 键 / 
值 数 据 结构 ， 它 使 得 在 JavaScript 中 创建 映射 变 得 更 加 自然 且 高 效 ， 而 不 再 需要 对 象 字面 量 。 


























5.1.1 初 识 ES6 map 


接 下 来 我 们 用 Map 重 写 前 面 的 代码 。 如 你 所 见 ， 代 码 少 了 很 多 ， 因 为 用 ES5 构建 自 定义 散 
列 映射 的 实现 细 市 已 经 内 置 到 Map 中 了 。 




















const map = new Map() 
map.set('contra', { description: 'Asynchronous flow control' }) 
map.set('dragula', { description: 'Drag and drop' }) 
map.set('woofmark', { 

description: 'Markdown and WYSIWYG editor' 
}) 
console.log([...map]) 


创建 map 后 ， 就 可 以 通过 给 map.has 方法 传人 一 个 key 来 查询 它 是 否 包含 某 个 成 员 。 


map.has('contra') 
// <- true 
map.has('jquery') 
// <- false 


传统 的 对 象 会 对 键 进行 类 型 转换 ， 但 map 不 会 。 显 然 ， 这 是 一 个 优点 ， 但 需要 注意 的 是 ， 


在 查询 map 时 ，map 对 键 的 处 理 方式 与 传统 对 象 也 不 同 。 以 下 示例 在 创建 Map 实例 时 传人 
了 一 个 可 迭代 的 键 / 值 对 数组 ， 可 以 看 出 键 值 并 没有 转换 为 字符 串 。 
































const map = new Map([[1, 'the number one']]) 
map.has(1) 

// <- true 

map.has('1') 

// <- false 


map.get 方法 接收 一 个 参数 ， 如 果 存 在 该 键 ， 则 返回 对 应 的 值 。 








map.get('contra') 
// <- { description: 'Asynchronous flow control' } 





传人 想 要 删除 的 键 ， 就 可 以 通过 map.delete 方法 从 map 中 删除 对 应 的 值 








o 





map.deLete('contra ' ) 
map.get('contra') 
// <- undefined 


你 可 以 通过 map.clear 清空 整个 Map， 但 不 会 丢失 对 Map 本 身 的 引用 。 这 很 适合 用 来 重 置 对 
象 的 状态 。 
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Const map = new 
map.has(1) 

// <- true 
map.clear() 
map.has(1) 

// <- false 
[...map] 

// <- [] 


Map([[1, 2], [3, 4], [5, 6]]) 


map 有 一 个 只 读 的 .size 属性 ， 该 属性 与 Array#Length 类 似 ， 用 于 表示 当前 map 中 的 成 员 


总 数 。 


Const map = new 
map.size 

/1/ <- 3 
map.delete(3) 
map.size 

/1/ <- 2 
map.clear() 
map.size 


1/ <- 8 


Map([[1, 2], [3, 4], [5, 6]]) 








任意 对 象 都 可 以 作为 map 的 键 : 我 们 不 仅 可 以 使 用 符号 、 数 值 或 字符 串 这 样 的 基本 类 型 ， 
还 可 以 使 用 函数 、 对 象 、 日 期 ， 其 至 DOM 元 素 。 这 些 键 不 会 像 在 普通 的 JavaScript 对 象 





中 那样 被 转换 为 字符 


Const map = new 





串 ， 而 是 会 保留 它们 的 引用 。 


Map() 


map.set(new Date(), function today() {}) 
map.set(() => 'key', { key: 'door' }) 


map.set(Symbol( 














'items'), [1, 2]) 











如 果 选 择 使 用 符号 作为 map 的 键 ， 那 么 必须 使 用 对 同一 符号 的 引用 来 获取 该 成 员 ， 如 下 





所 示 。 


const map = new 


Map() 


const key = Symbol('items') 


map.set(key, [1 
map.get(Symbol( 
// <- undefined 
map.get(key) 
// <- [1, 2] 


假设 有 一 个 由 键 / 值 














Ed 2]) 
'items')) // 与 变量 key 的 引用 不 同 





对 构成 的 二 维 数组 items， 我 们 可 以 使 用 for..of 来 迭代 items， 并 用 











map.set 将 每 个 键 / 值 对 添加 到 map 中 ， 如 下 所 示 。 注 意 ， 我 们 在 for. .of 循环 中 使 用 了 解 


构 来 轻松 地 取出 key 


const items = [ 
[new Date(), 
[() => 'key', 
[Symbol( 'item 


和 value。 


function today() {}], 
{ key: 'door' }], 
s'), [1, 2]] 
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] 

const map = new Map() 

for (const [key, value] of items) { 
map.set(key, value) 


} 


map 也 是 可 迭代 对 象 ， 因 为 它 实现 了 Symbol.iterator 方法 。 因 此 ， 就 像 前 面 迭 代数 组 创 
建 map 那样 ， 我 们 也 可 以 使 用 for. .of 循环 通过 迭代 map 来 创建 副本 。 








const copy = new Map() 
for (const [key, value] of map) { 
copy.set(key, value) 


} 
为 简单 起 见 ， 你 可 以 使 用 任何 遵循 可 迭代 协议 的 对 象 直接 初始 化 map， 并 生成 [key， 
value] 的 集合 。 以 下 代码 段 用 数组 创建 了 一 个 新 的 Map。 在 这 种 情况 下 ， 所 有 的 迭代 行为 
都 发 生 在 Map 的 构造 函数 中 。 











const items = [ 
[new Date(), function today() {}]， 
[() => 'key', { key: 'door' }], 
[Symbol('items'), [1, 2]] 

] 


const map = new Map(items) 


创建 map 的 副本 其 至 更 容易 : 将 要 复制 的 map 作为 参数 传递 给 新 map 的 构造 函数 就 可 
以 获取 副本 。 这 里 并 设 有 重 载 new Map(map)。 我 们 利用 map 本 身 既 可 以 实现 可 迭代 协 
议 ， 又 可 以 将 可 返 代 对 象 作为 参数 的 特性 来 创建 新 的 map。 以 下 代码 展示 了 这 一 过 程 是 
多 么 简单 。 











const copy = new Map(map) 








因为 map 是 可 迭代 对 象 ， 所 以 我 们 可 以 很 容易 地 将 它 传 人 其 他 map 中 ， 也 可 以 很 轻松 地 
使 用 它们 。 以 下 代码 展示 了 如 何 使 用 扩展 运算 符 来 访问 map。 





const map = new Map() 

map.set(1, 'one') 

map.set(2, 'two') 

map.set(3, 'three') 

console.log([...map]) 

// <- [[1i, 'one'], [2, 'two'], [3, 'three']] 


以 下 代码 结合 了 ES6 中 的 Map、for. .of 循 坏 、let 变量 和 模板 字符 串 这 些 新 特性 。 





const map = new Map() 

map.set(1, 'one') 

map.set(2, 'two') 

map.set(3, 'three') 

for (const [key, value] of map) { 
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ConsoLe.Log(`S{f key }: ${ value }°) 
// <- '1: one' 
// <- '2: two' 
// <- '3: three' 
} 


虽然 需要 通过 API 才能 访问 map 成 员 ， 但 与 散 列 映射 相同 ， 它 们 的 键 是 唯一 的 。 不 断 给 同 
一 个 键 赋值 只 会 履 写 其 对 应 的 值 。 以 下 代码 段 表 明 ， 即 使 反复 为 'a' 赋值 ，map 中 也 只 会 
包含 一 个 成 员 。 











const map = new Map() 
map.set('a', 1) 
map.set('a', 2) 
map.set('a' , 3) 
console.log([...map]) 
// <- [['a', 3]] 








ES6 map 使 用 SameValuezero 算法 对 键 进行 比较 ， 其 中 NaN 等 于 NaN，-0 等 于 +0。 以 下 代 
码 表明 ， 即 便 NaN 通常 不 等 于 自身 ， 但 作为 Map 的 一 个 键 ，NaN 始终 代表 一 个 常量 。 





console.log(NaN === NaN) 
// <- false 
console.log(-0 === +0) 
// <- true 


const map = new Map() 
map.set(NaN, 'one') 

map.set(NaN, 'two') 

map.set(-0, 'three') 

map.set(+0, 'four') 
console.log([...map]) 

// <- [[NaN, 'two'], [0, 'four']] 





迭代 Map 实际 上 是 在 遍历 它 的 .entries()。 因 为 map[Symbol.iterator] 指向 map.entries， 
所 以 我 们 不 必 显 式 地 遍历 .entries()。.entries() 方法 返回 map 中 键 / 值 对 的 迭代 器 





console.log(map[Symbol.iterator] === map.entries) 
// <- true 


我 们 还 可 以 使 用 另外 两 个 Map 迭代 器 : .keys() 和 .values()。 前 者 枚 举 了 map 中 所 有 的 
键 ， 后 者 枚 举 了 所 有 的 值 ， 而 .entries() 则 玫 举 了 所 有 的 键 / 值 对 。 以 下 代码 展示 了 这 三 
种 方法 之 间 的 区 别 。 














const map = new Map([[1, 2], [3, 4], [5, 6]]) 
console.log([...map.keys()]) 

// [1， 3 5] 
console.log([...map.values()]) 

// ei [2， 4， 6] 
console.log([...map.entries()]) 


// < [[1， 2]， [B35 4]， [5, 6]] 
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对 map 中 成 员 的 迭代 遵循 插入 时 的 顺序 ， 这 与 0bject.keys 不 同 , 后 者 遵循 任意 顺序 。 但 
在 实践 中 ， 插 入 顺序 往往 由 JavaScript 引擎 保存 ， 与 规范 无 关 。 





map 的 .forEach 方法 与 ES5 中 Array 对 象 的 该 方法 用 法 相同 ， 签 名 为 (vatue，key，map)， 
其 中 value 和 key 表示 迭代 中 的 当前 元 素 的 值 和 键 ，map 表示 被 迭代 的 map。 再 次 强调 ， 
Map 中 的 键 是 不 会 转换 为 字符 串 的 ， 如 下 所 示 。 

















Const map = new Map([ 
[NaN，1]， 
[Symbol(), 2], 
['key', 'value'], 
[{ name: 'Kent' }, 'is a person'] 


]) 
map.forEach((value, key) => console.log(key, value)) 
// <- NaN 1 


// <- Symbol() 2 
// <- 'key' 'valye' 
// <- { name: 'Kent' } 'is a person' 





至 此 ， 我 们 了 解 了 Map 的 键 可 以 是 任何 对 象 的 引用 。 接 下 来 我 们 看 看 这 个 API 的 具体 用 法 。 


5.1.2 ” 散 列 映射 和 和 DOM 元 素 

在 ES5 中 ， 如 果 想 要 将 DOM 元 素 与 (连接 该 元 素 与 某 个 库 的 ) API 对 象 相 关联 ， 就 不 得 
不 用 一 种 匈 余 又 低 效 的 方式 来 实现 ， 如 下 所 示 。 以 下 代码 将 给 定 DOM 元 素 与 一 个 含有 若 
干 方法 的 API 对 象 相关 联 ， 并 将 它们 存储 在 map 中 ， 之 后 我 们 就 可 以 找 出 DOM 元 素 对 应 
的 API 对 象 了 。 











const map = [] 
function customThing(el) { 
const mapped = findByElement(el) 
if (mapped) { 
return mapped 
} 
const api = { 


// 自 定义 API 方 法 


const entry 
api.destroy 
return api 

} 

function storeInMap(el, api) { 
const entry = { el, api } 
map.push(entry) 
return entry 

} 

function findByElement(query) { 
for (const { el, api } of map) { 

if (el === query) { 


storeInMap(el, api) 
destroy.bind(null, entry) 
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} 
} 


return api 


} 


function destroy(entry) { 
const index = map.indexOof(entry) 


ma 


} 


p.splice(index, 1) 


Map 最 有 价值 的 特性 之 一 是 可 以 通过 任何 对 象 进行 索 引 ， 如 DOM 元 素 。 结 合 Map 处 理 集合 
的 能 力 ， 很 多 事情 都 可 以 简化 ， 这 在 jQuery 这 样 重 DOM 操作 的 代码 库 中 很 重要 ，DOM 
元 素 经 常 需要 映射 到 这 些 库 的 内 部 状态 。 





以 下 示例 展示 了 Map 是 如 何 减轻 维护 压力 的 。 


cons 


t map = new Map() 


function customThing(el) { 
const mapped = findByElement(el) 
if (mapped) { 


} 


CO 


st 
re 
} 
func 
ma 
} 
func 
re 
} 
func 
ma 


} 


return mapped 


nst api = { 
// 自 定义 API 方 法 
destroy: destroy.bind(null, el) 


oreInMap(el, api) 
turn api 


tion storeInMap(el, api) { 
p.set(el, api) 


tion findByElement(el) { 
turn map.get(el) 


tion destroy(el) { 
p.delete(el) 








使 用 原生 Map 方法 仅 需 一 行 代码 即 可 实现 映射 操作 ， 这 意味 着 我 们 可 以 内 联 这 些 函 数 ， 不 
必 担 心 可 读 性 问题 。 以 下 代码 是 前 面 那 段 ES5 代码 的 简化 版 本 。 这 里 不 再 关心 实现 细节 ， 


而 是 真正 


Cons 
func 
co 
if 


} 


人 





回归 从 DOM 到 API 映射 的 本 质 需 求 。 





t map = new Map() 

tion customThing(el) { 

nst mapped = map.get(el) 
(mapped) { 

return mapped 


nst api = { 
// 自 定义 API 方 法 
destroy: () => map.delete(el) 
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map.set(el, api) 
return api 


} 
然而 ， Map 并 不 是 ES6 中 唯一 的 内 置 集合 ， 还 有 WeakMap、Set 和 Weakset。 接 下 来 继续 讨 


仑 WeakMap 。 


5.2 理解 和 使 用 weakMap 


大 部 分 情况 下 ， 你 可 以 视 WeakMap 为 Map 的 子 集 。 相 比 于 Map，WeakMap 有 着 更 为 精简 的 
因为 WeakMap 中 没有 迭代 器 协议 ， 所 以 使 用 WeakMap 创建 的 集合 不 像 Map 那样 可 迭 
代 ， 这 意味 着 没有 WeakMap#entries、WeakMap#keys、WeakMap#values、WeakMap#forEach 及 
WeakMap#clear 等 方法 。 














另 一 个 区 别 是 ，Map 中 的 key 可 以 是 对 象 引 用 或 其 他 , 但 WeakMap 中 的 每 个 key 都 必须 是 一 
个 对 象 。 记 住 ，Symbot 是 一 种 值 类 型 ， 因 此 也 不 能 作为 weakMap 的 key。 





const map = new WeakMap() 
map.set(Date.now, 'now') 
map.set(1, 1) 

// <- TypeError 
map.set(Symbol(), 2) 

// <- TypeError 


为 了 成 为 一 个 特征 有 限 的 集合 ，WeakMap 中 键 的 引用 是 弱 保持 的 ， 也 就 是 说 ， 如 果 作 为 
WeakMap 键 的 对 象 除 了 弱 引 用 外 没有 其 他 的 引用 ， 则 该 对 象 将 被 垃圾 回收 清除 。 举 个 例子 ， 
当 一 个 person 对 象 存 有 一 些 元 数据 时 ， 如 果 你 希望 这 个 person 对 象 在 对 它 的 唯一 引用 是 
这 些 关联 的 元 数据 时 被 垃圾 回收 清除 ， 那 么 WeakMap 的 这 一 特性 就 有 了 用 武之 地 。 现 在 你 
可 以 使 用 person 作为 键 将 这 些 元 数据 保存 在 WeakMap 中 。 
































从 这 个 意义 上 讲 ， 当 维护 WeakMap 的 组 件 不 拥有 了 映射 对 象 ， 但 希望 将 它 自己 的 信息 分 配给 
它们 而 无 须 修改 原始 对 象 或 它们 的 生命 周期 时 ，weakMap 最 有 用 。 例 如 ， 当 从 文档 中 删除 
DOM 市 点 时 ， 回 收 内 存 。 


通过 向 构造 国 数 传人 一 个 可 迭代 对 象 ， 可 以 初始 化 一 个 WeakMap。 与 创建 一 个 Map 相同 ， 
这 个 可 迭代 对 象 应 该 是 一 个 键 / 值 对 组 成 的 列表 。 





const map = new WeakMap([ 
[new Date(), 'foo'], 
[() => 'bar', 'baz'] 

]) 


为 了 高 效 地 实现 弱 引 用 ，WeakMap 的 API 更 少 ， 但 它 仍然 保有 与 Map 相同 的 .has、.get 
和 .delete 方法 。 以 下 代码 展示 了 这 些 方 法 的 用 法 。 





const date = new Date() 

const map = new WeakMap([[date, 'foo'], [() => 'bar', 'baz']]) 
map.has(date) 

// <- true 

map.get(date) 

// <- 'foo' 

map.delete(date) 

map.has(date) 

// <- false 


WeakMap 是 一 个 糟糕 的 Map 吗 


令 人 产生 误解 的 根源 在 于 它 的 名 字 ，WeakMap 中 的 “weak” 表 示 它 对 其 键 是 弱 引 用 的 ， 如 
果 除 了 用 作 weakMap 键 之 外 ， 作 为 键 的 对 象 没 有 其 他 引用 ， 那 么 它们 就 会 被 垃圾 回收 清除 。 
这 与 Map 形成 了 鲜明 的 对 比 ，Map 中 的 键 对 象 是 强 引 用 的 ， 可 以 阻止 Map 键 和 值 被 垃圾 
收 清除 。 


因此 ， 我 们 可 以 用 WeakMap 来 指定 元 数据 或 扩展 对 象 ， 同 时 在 没有 其 他 引用 的 情况 下 回 
收 该 对 象 。Node.js 中 process.on('unhandledRejection') 的 底层 实现 就 是 一 个 完美 的 示 
例 ， 它 使 用 weakMap 来 跟踪 尚未 处 理 的 被 拒绝 的 Promise。WeakMap 不 会 紧 紧 抓 住 与 这 些 
Promise 相关 的 状态 ， 因 此 可 以 用 WeakMap 来 阻止 内 存 泄漏 。 这 样 一 个 简单 的 map 既 可 以 
较 弱 地 保持 状态 ， 又 可 以 灵活 地 在 Promise 不 再 被 引用 时 将 其 从 map 中 删除 。 
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如 果 想 要 保存 DOM 元 素 的 数据 并 在 不 需要 时 从 内 存 中 释放 ， 我 们 也 可 以 使 用 WeakMap。 就 
这 一 点 而 言 ， 在 实现 与 DOM 相关 的 API 缓存 解决 方案 时 ， 使 用 WeakMap 比 我 们 早先 使 用 
Map 更 好 。 


总 而 言 之 ，WeakMap 当然 不 比 Map 差 ， 只 是 尺 有 所 短 、 寸 有 所 长 罢了 。 


5.3 ES6 中 的 Set 


Set 是 ES6 中 内 置 的 新 集合 类 型 ， 用 于 表示 一 组 值 。 从 某 些 方面 来 说 ，Set 与 Map 类 似 。 














。 Set 也 是 可 迭代 的 。 

。 Set 构造 国 数 也 接受 一 个 可 返 代 对 象 。 

。 Set 也 有 一 个 .size 属性 。 
与 Map 中 的 键 一 样 ，Set 中 的 值 可 以 是 任意 值 或 对 象 引 用 。 
与 Map 中 的 键 一 样 ，Set 中 的 值 必须 是 唯一 的 。 

。 NaN 在 Set 中 也 等 于 NaN。 

。 Set 同样 拥有 .keys、.values、.entries、.forEach、.has、.delete 和 .clear 方法 。 











然而 ，Set 与 Map 在 几 个 重要 的 方面 有 所 不 同 。Set 没有 键 / 值 对 ， 它 只 有 一 个 维度 。 你 可 
以 将 Set 视 为 元 素 彼此 不 同 的 数组 。 
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Set 中 没有 .get 方法 。 在 仅 有 的 一 个 维度 中 无 法 获取 除了 值 以 外 的 其 他 东西 ， 因 此 set. 
get(value) 方法 是 多 余 的 。 如 果 想 要 检查 一 个 value 是 否 在 Set 中 ， 可 以 使 用 set.has(value)。 




















同样 ，set.set(value) 方法 也 没有 意义 ， 因 为 我 们 不 能 为 value 设置 key， 而 是 仅 向 该 Set 
添加 值 。 因 此 ， 将 值 添加 到 Set 的 方法 是 set.add， 如 下 所 示 。 




















const set = new Set() 
set.add({ an: 'example' }) 


Set 是 可 迭代 的 ， 但 与 Map 不 同 ，Set 只 能 迭代 值 ， 而 不 能 迭代 键 / 值 对 。 以 下 示例 展示 了 
如 何 使 用 扩展 运算 符 通过 数组 创建 st， 并 将 Set 展开 为 一 个 一 维 列表 。 





const set = new Set(['a', 'b', 'c']) 
console.log([...set]) 
// 哈 二 ['a', 'b', se] 


在 下 面 的 示例 中 ， 你 会 注意 到 Set 不 包含 重复 成 员 ， 每 个 元 素 必须 是 唯一 的 。 





const set = new Set(['a'’, 'b', 'b', 'c', 'c']) 
console.log([...set]) 
// ['a', "by; 'c'] 


以 下 代码 首先 创建 了 一 个 包含 页 面 上 所 有 <div> 元 素 的 Set， 并 打印 元 素 个 数 。 然 后 查询 
DOM 并 调用 set.add 将 这 些 DOM 元 素 再 次 加 入 set 中 。 鉴 于 这 些 DOM 元 素 已 经 在 set 
中 ，.size 属性 不 会 改变 ， 这 意味 着 set 也 没有 改变 。 


function divs() { 

return document.querySelectorAll('div') 
} 
const set = new Set(divs()) 
console.log(set. size) 
// <- 56 
divs().forEach(div => set.add(div)) 
console.log(set. size) 
// <- 56 


因为 Set 没有 键 ， 所 以 Set#entries 方法 为 集合 中 的 每 个 元 素 返 回 [value，value] 的 迭代 器 。 





const set = new Set(['a', 'b', 'c']) 

console.log([...set.entries()]) 

// <- [['a'’, 'a']j, ['b', 'b'], ['c', 'c']] 
Map#entries 返回 [key，value] 的 迭代 器 ，Set#entries 方法 也 很 类 似 。 使 用 Set#entries 作为 
Set 集合 的 默认 友 代 器 并 不 是 很 有 价值 ， 因 为 通常 用 法 是 在 for. .of 或 Array.fronm 中 展开 set。 
在 这 些 情况 下 ， 你 可 能 想 迭 代 的 是 集合 中 的 一 系列 value， 而 不 是 一 系列 [value, value]。 











因此 ，set 默认 的 和 迭代 器 是 Set#values， 而 不 是 像 Map 那样 默认 的 迭代 器 为 Map#entries， 
如 下 所 示 。 





A 
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const map = new Map() 
console.log(map[Symbol.iterator] === map.entries) 
// <- true 

const set = new Set() 
console.log(set[Symbol.iterator] === set.entries) 
// <- false 

console.log(set[Symbol.iterator] === set.values) 
// <- true 


为 保持 一 致 性 ，Set#keys 方法 也 返回 value 的 迭代 器 ， 实 际 上 它 是 对 Set#values 友 代 
引用 。 





const set = new Set() 
console.log(set.keys === set.values) 
// <- true 


5.4 ES6 WeakSet 





就 像 Map 和 WeakMap 的 关系 一 样 ，Neakset 是 Set 的 弱 版 本 ， 它 无 法 迭代 。Weakset 中 
必须 是 唯一 的 对 象 引 用 。 如 果 weakset 中 的 值 没 有 其 他 引用 ， 那 么 它 将 被 垃圾 回收 。 

















Meakset 只 有 .add、.detete 以 及 检查 其 中 是 否 有 给 定 值 的 .has 方法 。 与 5et 一 样 ， 





WeakSet 也 没有 .get 方法 ， 因 为 它 是 一 维 的 。 
与 WeakMap 一 样 ， 我 们 也 不 能 向 weakset 添加 字符 串 或 符号 这 样 的 基本 人 





TI 














const set = new WeakSet() 
set.add('a') 

// <- TypeError 
set.add(Symbol()) 

// <- TypeError 


虽然 weakset 本 身 不 可 友 代 ， 但 可 以 将 和 迭代 器 传递 给 构造 国 数 。 在 构造 集合 时 ， 可 以 
迭代 对 象 进行 欠 代 ， 并 将 可 迭代 序列 中 的 每 个 成 员 添 加 到 集合 中 ， 如 下 所 示 。 








const set = new WeakSet([ 
new Date(), 


器 的 


TI 





的 














对 可 


通过 使 用 weakset ， 我 们 可 以 确保 Car 类 中 的 方法 是 Car 类 的 实例 对 象 调用 的 ， 如 下 所 示 。 


const cars = new WeakSet() 
class Car { 
constructor() { 
cars.add(this) 


} 
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fueLUp() { 
if (!cars.has(this)) { 
throw new TypeError('Car#fuelUp called on a non-Car!') 
} 
} 
} 





举 个 更 有 用 的 例子 ， 考 虑 以 下 的 istownProperties 接口 ， 该 接口 实现 的 是 打印 传人 对 象 的 
包括 子 属性 在 内 的 所 有 属性 。 这 个 接口 应 该 知道 如 何 处 理 循 环 引 用 ， 而 不 是 陷入 无 限 循 环 
中 。 你 会 如 何 实现 这 样 一 个 API 呢 ? 


























const circle = { cx: 20, cy: 5, r: 15 } 
circle.self = circle 
listOwnProperties({ 
circle, 
numbers: [1, 5, 7], 
sum: (a, b) =>a+b 
}) 
// <- circle.cx: 20 
// <- circle.cy: 5 
// <- circle.r: 15 
// <- circle.self: [circular] 
// <- numbers.0: 1 
// <- numbers.1: 5 
// <- numbers.2: 7 
// <- sum: (a, b) =>a+b 




















其 中 一 种 实现 方案 是 在 weakset 中 保存 一 个 可 见 引 用 列表 ， 以 避免 非 线 性 查找 。 这 里 使 用 
WeakSet 而 不 是 Set， 因 为 我 们 不 需要 Set 中 存在 的 其 他 功能 。 








function listOwnProperties(input) { 
recurse(input) 


function recurse(source, lastPprefix, seen = new WeakSet()) { 
Object.keys(source).forEach(printOrRecurse) 


function printOrRecurse(key) { 
const value = source[key] 
const prefix = LastPrefix 
? “${ lastprefix }.${ key }° 


: key 
const shouLdRecur = ( 
isObject(value) || 
Array.isArray(value) 


) 
if (shouldRecur) { 
if (!seen.has(value)) { 
seen.add(value) 
recurse(value, prefix, seen) 
} else { 
consotLe.Log( ` 5S{ prefix }: [circular]) 





} else { 
consoLe.Log( ` 5S{ prefix }: ${ value }°) 
} 
} 
} 
} 
function isObject(value) { 
return Object.prototype.toString.call(value) === 
'[object Object]' 
} 


更 常见 的 用 法 是 保存 DOM 元 素 。 在 一 个 DOM 库 中 ,通常 我 们 需要 在 第 一 次 与 一 个 
DOM 元 素 互动 时 操作 它 ， 但 又 不 想 留 下 痕迹 ， 此 时 就 可 以 使 用 weakset。 例 如 ， 库 想 要 为 
target 元 素 添 加 一 些 子 节 点 ， 但 又 无 法 确保 这 些 子 市 点 是 否 被 添加 过 ， 同 时 也 不 想 弄 乱 这 
个 target; 或 者 它 只 想 在 第 一 次 调用 时 执行 某 种 操作 。 











const elements = new WeakSet() 
function dommy(target) { 
if (elements.has(target)) { 
return 


} 
elements.add(target) 


// 执行 工作 …… 

}) 
无 论 何 种 原因 ， 如 果 希 望 在 不 显 式 地 改变 DOM 元 素 的 情况 下 ， 用 标记 与 DOM 元 素 保持 
关联 ，meakset 是 一 条 可 行 的 路 。 如 果 不 想 使 用 简单 的 标记 来 关联 任意 数据 ， 或 许 你 可 以 
试 试 weakMap。 在 决定 是 否 使 用 Map、WeakMap、Set 或 WeakSet 之 前 ， 你 应 该 问 自己 一 系列 
的 问题 。 例 如 ， 如 果 需 要 保留 与 对 象 相 关 的 数据 ， 那 么 可 以 考虑 使 用 弱 集 合 。 如 果 只 关心 
某 个 元 素 是 否 存在 ， 那 么 可 能 需要 使 用 Set。 如 果 想 要 创建 一 个 缓存 ， 建 议 使 用 Map。 


针对 此 前 实现 起 来 很 烦琐 的 用 例 〈 如 前 面 Map 的 例子 )， 或 者 难以 正确 执行 的 用 例 〈 如 
WeakMap 的 例子 ， 其 中 当 不 再 需要 引用 时 将 其 清除 ， 以 避免 内 存 泄漏 )，ES6 的 集合 都 提供 
了 内 置 的 解决 方案 。 
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第 6 章 


使 用 代理 控制 属性 访问 





代理 (proxy) 是 ES6 中 受 人 瞩目 又 强大 的 一 个 属性 ， 它 在 API 使 用 者 和 对 象 之 间 扮 演 了 
一 个 中 间 人 的 角色 。 简 而 言 之 ， 我 们 可 以 使 用 Proxy 来 控制 被 访问 的 底层 target 对 象 的 属 
性 的 行为 。handter 对 象 可 以 用 于 配置 Proxy 的 捕获 器 (trap)， 后 者 用 于 定义 和 限制 访问 
底层 对 象 的 方式 。 


6.1 了 解 代理 


默认 情况 下 ， 代 理 不 会 做 什么 ， 事 实 上 它 什 么 也 不 做 。 如 果 不 提供 任何 配置 ， 那 么 代理 就 
像 是 通 向 target 对 象 的 一 个 通道 ， 也 就 是 所 谓 的 “无 操作 转发 代理 “。 换 名 话说 ， 对 代理 
对 象 进行 的 所 有 操作 都 会 传递 到 底层 对 象 。 
























































HH 











我 们 在 以 下 代码 中 创建 了 一 个 无 操作 转发 Proxy。 可 以 看 到 ， 通 过 给 proxy.exposed 赋值 
我 们 可 以 将 该 值 传递 到 target.exposed。 我 们 可 以 将 代理 想象 为 其 底层 对 象 的 门卫 : 它们 
可 以 允许 某 些 操作 通过 ， 也 可 以 拒绝 另 一 些 操作 通过 ， 但 无 论 人 允许 还 是 拒绝 ， 都 是 有 充分 
理由 的 。 





























Const target = {} 

const handler = 全 

const proxy = new Proxy(target, handler) 
proxy.exposed = true 
ConsoLe.Log(target.exposed) 

// <- true 
console.log(proxy.somethingElse) 

// <- undefined 
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通过 添加 捕获 器 ， 我 们 可 以 使 代理 对 象 发 挥 更 大 的 作用 。 捕 获 器 可 以 从 不 同 角度 拦截 对 
target 对 象 的 操作 ， 前 提 是 这 些 操作 必须 通过 proxy 进行 。 比 如 ， 我 们 可 以 通过 get 捕获 
器 来 打印 每 次 从 target 对 象 取得 的 值 ， 或 者 通过 set 捕获 器 阻止 对 某 些 属性 的 写 操作 。 我 
们 先 从 get 捕获 器 开始 。 

















6.1.1 捕获 get 访 问 

以 下 代码 中 的 proxy 对 象 可 以 捕获 对 target 对 象 的 每 一 次 访问 ， 因 为 我 们 为 它 定义 了 一 个 
handler .get 捕获 器 。 我 们 可 以 通过 这 个 捕获 器 转换 任意 属性 的 值 ， 然 后 再 将 转换 结果 返 
回 给 访问 者 。 






































const handler = { 
get(target, key) { 
console.log( ` Get on property "${ key }".) 
return target[key] 
} 
} 
const target = {} 
const proxy = new Proxy(target, handler) 
proxy.numbers = [1, 1, 2, 3, 5, 8, 13] 
proxy.numbers 
// 'Get on property "numbers"' 
ff es [le de 2 3 3, 613] 
proxy['something-else'] 
// 'Get on property "something-else"’ 
// <- undefined 


作为 代理 的 补充 ，ES6 引入 了 一 个 内 置 的 Reflect 对 象 。ES6 代理 的 捕获 器 会 一 对 一 地 映射 
到 Reflect 对 象 的 API。 具 体 来 说 ， 每 个 捕获 器 在 Reflect 对 象 上 都 有 一 个 对 应 的 反射 方法 。 
正 是 因为 有 了 这 些 方法 ， 我 们 才 可 以 使 用 代理 捕获 器 的 默认 行为 ， 而 无 须 自己 来 实现 。 


在 以 下 示例 中 ， 我 们 使 用 Reflect.get 实现 了 get 操作 的 默认 行为 ， 而 无 须 自己 再 编写 访 
| target 对 象 中 的 key 属性 的 代码 。 虽 然 眼前 这 个 示例 没什么 值得 大 惊 小 怪 的 ， 但 如 果真 
要 实现 其 他 捕获 器 的 默认 行为 ， 可 能 就 没 那 么 简单 ， 也 没 那 么 容易 写 正确 了 。 我 们 可 以 将 
捕获 器 的 所 有 参数 都 传递 给 相应 的 反射 API， 然 后 返回 结果 。 
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const handler = { 
get(target, key) { 
console.log( ` Get on property "${ key }".) 
return Reflect.get(target, key) 
} 
} 
const target = {} 
const proxy = new Proxy(target, handler) 


get 捕获 器 不 一 定 总 是 返回 target[key] 的 原始 值 。 比 如 ， 要 想 确 保 所 有 加 了 前 级 “_” 的 
属性 都 不 能 访问 ， 此 时 可 以 抛 出 错误 ， 以 便 使 用 者 知道 这 些 属性 不 能 通过 代理 访问 。 
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const handler = { 
get(target, key) { 
if (key.startsWith('_')) { 
throw new Error( ‘Property "${ key }" is inaccessible.) 


return Reflect.get(target, key) 
} 
} 
const target = {} 
const proxy = new Proxy(target, handler) 
proxy._secret 
// <- Uncaught Error: Property "_secret" is inaccessible. 


你 可 能 已 经 意识 到 了 ， 借 助 代理 并 定义 明确 的 规则 来 禁止 访问 target 对 象 的 某 些 属性 ， 对 
外 只 暴露 代理 而 不 暴露 target 对 象 ， 应 该 是 代理 最 主要 的 用 途 。 这 样 一 来 ， 我 们 仍然 可 以 
自由 地 访问 底层 对 象 ， 但 使 用 者 必须 通过 代理 并 遵守 访问 规则 。 也 就 是 说 ， 如 何 访问 对 象 
由 我 们 说 了 算 。 这 在 ES6 引入 代理 前 是 不 可 能 做 到 的 。 




















了 









































6.1.2 ”捕获 set 访 问 
与 get 捕获 器 相对 ，set 捕获 器 可 以 拦截 属性 赋值 。 假 设想 要 阻止 对 下 划 线 开头 的 属性 的 
赋值 ， 我 们 可 以 像 实 现 前 面 的 get 捕获 器 那样 通过 set 捕获 来 达到 目的 。 





















































通过 proxy 访问 target 时 ， 以 下 示例 中 的 Proxy 会 同时 阻止 以 下 划 线 开头 的 属性 的 get 和 
set 操作 。 注 意 其 中 的 set 捕获 器 应 该 在 什么 情况 下 返回 true。 返 回 true 意味 着 给 属性 
key 设置 value 应 该 成 功 了 。 如 果 set 捕获 器 的 返回 值 是 fatse， 则 设置 相应 属性 的 值 在 严 
格 模式 下 会 导致 抛 出 TypeError， 否 则 会 静默 失败 。 如 果 这 里 使 用 Reflect.set ( 像 前 面 介 
绍 的 那样 )， 那 么 我 们 就 不 需要 自己 考虑 这 些 实现 细节 了 。 只 要 返回 RefLect.set(target， 
key，value) 即 可 。 这 样 一 来 ， 如 果 以 后 有 人 阅读 我 们 的 代码 ， 就 会 明白 我 们 在 这 里 使 用 
了 Reflect.set， 这 等 价 于 默认 操作 ， 即 等 价 于 不 使 用 Proxy 的 情形 。 


const handler = { 
get(target, key) { 
invariant(key, 'get') 
return Reflect.get(target, key) 
}， 
set(target, key, value) { 
invariant(key, 'set') 
return Reflect.set(target, key, value) 
} 
} 


function invariant(key, action) { 
if (key.startsWith('_')) { 
throw new Error(‘Can't ${ action } private "${ key }" 
property `) 










































































} 
const target = {} 
const proxy = new Proxy(target, handler) 





以 下 代码 演示 了 使 用 者 通 


对 使 用 者 而 言 ， 前 面 示例 中 被 代理 的 target 对 象 应 该 是 


proxy.text = 


过 proxy 对 象 操作 target 的 情形 


'the great black pony ate your Lunch' 


console.log(target. text) 


// <- 'the great black pony ate your Lunch' 
proxy._secret 

// <- Error: Can't get private "_secret" property 
proxy._secret = 'invalidate' 

// <- Error: Can't set private "_secret" property 




















完全 隐藏 的 ， 这 样 才能 强迫 他 们 必 


须 通过 proxy 来 实现 操作 。 阻 止 对 target 的 直接 访问 意味 着 使 用 者 必须 遵守 proxy 对 象 定 


义 的 访问 规则 ， 


function proxied() { 
const target = {} 
const handler = { 
get(target, key) 
invariant(key, 


return Reflect. 


}, 
set(target, key, 
invariant(key, 


return Reflect. 


如 “禁止 访问 以 下 划 线 开头 的 属性 ”。 
最 终 ， 我 们 可 以 将 被 代理 的 对 象 包装 在 一 个 函数 中 ， 然 后 返回 





proxy。 


~ 


‘get') 
get(target, key) 


value) { 
'set') 
set(target, key, value) 


} 
} 
return new Proxy(target, handler) 
} 
function invariant(key, action) { 
if (key.startsWith('_')) { 
throw new Error(‘Can't ${ action } private "${ key }" 
property `) 


} 

















用 法 相同 ， 只 不 过 现在 对 target 的 访问 完全 由 proxy 及 其 捕获 器 接管 
访问 target 中 类 似 _secret 的 属性 是 完全 不 可 能 的 ， 因 为 在 proxied 也 
到 target。 对 使 用 者 而 言 ，target 被 永远 封存 了 。 


























为 此 ， 我 们 可 以 编写 一 
象 。 然 后 我 们 就 可 以 在 需要 暴露 公共 API 时 调用 它 ， 如 下 所 示 。 这 里 的 
国 数 将 orginal 对 象 包装 在 一 个 Proxy 中 ， 而 且 以 prefix 值 
性 都 不 能 访问 。 





























function concealWithprefix(original, prefix=" 
const handler = { 
get(original, key) { 


_')l{ 


个 通用 的 代理 函数 来 接收 一 个 orginal 对 象 ， 并 返 


(未 提供 则 


。 此 时 ， 通 过 proxy 
数 外 部 根本 访问 不 


回 一 个 proxy 对 
concealWithprefix 


为 _) 为 前 缀 的 属 


























使 用 代理 控 人 








十 





I 属性 访问 | 139 


invariant(key, 'get') 
return Reflect.get(original, key) 
]， 
set(original, key, value) { 
invariant(key, 'set') 
return Reflect.set(original, key, value) 
} 
} 
return new Proxy(original, handler) 
function invariant(key, action) { 
if (key.startswith(prefix)) { 
throw new Error(‘Can't ${ action } private "${ key }" 
property ~) 


} 
} 
const target = { 
_secret: 'secret', 
text: 'everyone-can-read-this' 


} 


const proxy = concealWithprefix(target) 


// 将 代理 暴露 给 使 用 者 
你 可 能 会 说 ， 在 ES5 中 使 用 对 concealWithPrefix 函数 私有 的 变量 也 可 以 达到 相同 目的 ， 
根本 不 必 使 用 Proxy。 二 者 的 区 别 是 ， 使 用 Proxy 可 以 实现 动态 的 属性 私有 化 。 如 果 不 使 
用 Proxy， 就 不 能 将 所 有 以 下 划 线 开头 的 属性 标记 为 私有 。 虽 然 可 以 在 对 象 上 使 用 0bject. 
freeze  ， 但 之 后 不 光 是 使 用 者 ， 就 连 你 自己 也 不 能 修改 属性 了 。 或 者 你 可 以 给 每 个 属性 都 
定义 getter 和 setter 访问 器 ， 然 而 这 样 不 能 阻止 对 所 有 属性 的 访问 ， 只 能 阻止 那些 明确 
配置 了 getter 和 setter 的 属性 。 









































6.1.3 通过 代理 实现 模式 验证 

有 时 我 们 需要 验证 基于 用 户 输入 生成 的 对 象 。 作 为 模型 ， 这 个 对 象 遵 循 茶 种 模式 
(schema) : 结构 是 什么 样 的 ， 应 该 有 哪些 属性 ， 属 性 应 该 是 什么 类 型 ， 以 及 应 该 如 何 填 充 
这 些 属性 ， 等 等 。 比 如 ， 我 们 可 以 验证 一 个 电子 邮件 字段 customer 包含 邮件 地 址 ， 一 个 数 
值 类 型 的 cost 字段 包含 数值 ， 一 个 必 填 的 name 字段 没有 缺失 。 

















实现 模式 验证 的 方法 有 很 多 。 我 们 可 以 将 模型 传 给 一 个 验证 函数 ， 如 果 在 对 象 上 发 现 无 效 
值 ， 则 抛 出 错误 。 但 在 确认 它 有 效 后 ， 我 们 必须 确保 对 象 不 会 再 被 修改 。 我 们 可 以 逐个 验 
证 每 个 属性 ， 但 必须 记得 在 它们 改变 时 再 次 验证 。 我 们 也 可 以 使 用 Proxy。 通 过 给 使 用 者 
提供 实际 模型 对 象 的 代理 ， 我 们 可 以 确保 对 象 永远 不 会 处 于 无 效 状态 ， 因 为 无 效 就 会 导致 
抛 出 异常 。 




















注 1: 0bject.freeze 方法 会 阻止 添加 、 删 除 属性 以 及 修改 属性 值 的 引用 。 但 它 不 会 让 属性 值 本 身 变 得 不 能 
修改 。 这 些 值 的 属性 仍然 可 以 改变 ， 前 提 是 没有 对 这 些 对 象 调 用 0bject.freeze。 























通过 Proxy 实现 验证 的 另 一 个 好 处 是 ， 它 可 以 帮助 我 们 将 验证 从 target 对 象 分 离 出 来 ， 而 
验证 往往 发 生 在 比较 “恶劣 ”的 环境 下 。target 对 象 会 保持 纯粹 JavaScript 对 象 的 状态 ， 
因为 你 提供 给 使 用 者 的 只 是 验证 代理 ， 而 代理 可 以 确保 底层 对 象 始终 有 效 ， 不 被 污染 。 





与 验证 函数 类 似 ， 代 理 的 处 理 逻 辑 
承 或 ES6 的 类 。 


























也 可 以 在 不 同 的 Proxy 间 重 复 使 用 ， 而 无 须 依赖 原型 继 


以 下 示例 定义 了 一 个 简单 的 validator 对 象 ， 它 包含 一 个 set 捕获 器 ， 用 于 查询 映射 中 的 
键 。 通 过 代理 设置 属性 时 ， 就 会 在 映射 中 查询 相应 的 键 是 否 存在 。 如 果 映 射 给 该 属性 设 定 
了 规则 ， 那 么 它 就 会 运行 相应 的 函数 来 判定 相应 的 赋值 是 否 有 效 。 只 要 用 validator 的 代 
理 设置 person 的 属性 ， 就 可 以 按照 预定 义 的 验证 规则 确保 模型 符合 要 求 。 


























const validations = new Map() 
const validator = { 
set(target, key, value) { 
if (validations.has(key)) 























{ 


return validations[key](value) 


} 


return Reflect.set(target 


} 


,key, value) 


validations.set('age', validateAge) 


function validateAge(value) { 


if (typeof vaLue !== 'number' || Number.isNaN(value)) { 
throw new TypeError('Age must be a number') 


} 
if (value <= 0) { 


throw new TypeError('Age must be a positive number') 


} 


return true 


} 





以 下 代码 展示 了 如 何 将 vatidator 作为 处 理 器 使 用 。 这 是 一 个 通用 的 代理 处 理 器 ， 我 们 将 
它 传 给 Proxy 以 验证 person 对 象 。 然 后 处 理 器 会 对 任何 通过 代理 设置 的 属性 按照 验证 规则 
进行 验证 ， 确 保 设置 的 值 满足 规则 要 求 。 这 里 只 添加 了 一 条 规则 ， 即 age 必须 是 一 个 大 于 


零 的 正 数 。 


const person = {} 























const proxy = new Proxy(person, validator) 


proxy.age = 'twenty three’ 


// <- TypeError: Age must be a number 


proxy.age = NaN 


// <- TypeError: Age must be a number 


proxy.age = 0 


// <- TypeError: Age must be a positive number 


proxy.age = 28 
console.log(person.age) 
// <- 28 
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代理 提供 了 前 所 未 有 的 细 粒 度 控 制 ， 通 过 预定 义 规 则 决定 了 使 用 者 能 做 什么 ， 不 能 做 什 


人 


实际 上 ， 代 理 还 有 一 个 更 加 严 苛 的 变 体 以 允许 我 们 完全 切断 对 target 的 访问 :可 撤销 


代理 。 


6.2 可 撤销 代理 


相 比 于 Proxy 对 象 ， 可 撤销 代理 提供 了 更 加 细 粒 度 的 控制 。 但 API 稍 有 不 同 ， 一 是 不 再 使 
用 new 关键 字 ( 相 比 于 new Proxy(target，handLer) ) ， 二 是 返回 的 是 一 个 { proxy，revoke } 
对 象 〈 而 不 仅仅 是 一 个 proxy 对 象 )。 调 用 revoke() 后 ， 任 何 操作 都 会 导致 proxy 抛 出 错误 。 












































接 下 来 仍然 以 “ 仅 转发 的 ”Proxy 为 例 ， 我 们 将 它 改造 成 一 个 可 撤销 代理 。 注 意 ， 创 建 代 














YH 








星 时 没有 使 用 new， 而 且 反复 调用 revoke() 没有 任何 反应 ， 但 之 后 再 想 访问 底层 对 象 会 导 





致 错误 。 


const target = {} 

const handler = 全 

const { proxy, revoke } = Proxy.revocable(target, handler) 
proxy.isUsable = true 

console.log(proxy.isUsable) 

// <- true 

revoke() 

revoke() 

revoke() 

console.log(proxy.isUsable) 

// <- TypeError: illegal operation attempted on a revoked proxy 





有 时 这 种 代理 非常 有 用 ， 因 为 你 可 以 完全 收回 使 用 者 访问 代理 的 权限 。 你 可 以 对 外 暴露 一 


个 可 撤销 代理 ， 而 将 其 revoke 方法 保存 在 一 个 WeakMap 集合 中 。 等 到 明显 不 该 让 使 用 者 

















ue 


























访问 底层 对 象 〈 甚 至 代理 ) 时 ， 就 可 以 调用 .revoke() 来 收回 它们 的 访问 权 了 。 





以 下 示例 展示 了 两 个 函数 ， 其 中 getstorage 返回 用 于 访问 storage 的 代理 对 象 ， 同 时 
用 Weaknap 集合 保存 了 代理 及 其 revoke 函数 。 当 我 们 想 要 切断 对 storage 的 访问 时 ， 
revokesorage 将 调用 对 应 的 revoke 函数 并 从 WeakMap 移 除 该 项 。 注 意 ， 这 里 允许 使 用 者 同 


时 访问 两 个 函数 不 会 造成 安全 问题 ， 只 要 通过 代理 访问 storage 的 权限 被 收回 ， 就 无 法 再 


















































恢复 。 


const proxies 
const storage 


= new WeakMap() 
= {} 
function getStorage() { 
const handler = {} 
const { proxy, revoke } = Proxy.revocable(storage, handler) 
proxies.set(proxy, { revoke }) 
return proxy 





function revokeStorage(proxy) { 
proxies.get(proxy).revoke() 
proxies.delete(proxy) 


} 
考虑 到 revoke 与 handler 捕获 器 同 在 一 个 作用 域 中 ， 你 可 以 制定 严厉 























的 访问 规则 。 比 如 ， 


要 是 使 用 者 企图 多 次 访问 某 个 私有 属性 ， 则 立即 撤销 其 对 proxy 的 访问 权 。 





6.3 ”代理 捕获 器 


























代理 最 强大 的 地 方 主要 体现 在 其 各 种 捕获 器 上 。 除 了 get 和 set， 我 们 还 可 以 通过 代理 拦 


截 很 多 访问 对 象 的 操作 。 
前 面 介绍 的 get 用 于 捕获 对 属性 的 读 取 ，set 用 于 捕获 对 属性 的 赋值 。 
各 种 各 样 的 捕获 器 。 

















| 






































6.3.1 has 捕获 器 


接 下 来 我 们 将 介绍 











我 们 可 以 使 用 handter.has 对 in 操作 符 隐藏 任意 属性 。 在 前 面 set 扣 











和 获 器 的 示例 中 ， 虽 














然 可 以 不 对 属性 赋值 ， 阻 止 读 取 带 某 种 前 级 的 属性 ， 但 一 些 讨 厌 的 使 用 者 仍然 可 以 通过 














proxy 刺探 出 那些 属性 是 否 存在 。 以 下 是 三 种 应 对 策略 。 


什么 也 不 做 ， 此 时 key in proxy 会 转换 为 RefLect.has(target，key)， 等 价 于 key in 


target。 
无 论 key 是 否 存在 于 target 中 ， 都 返回 true 或 false 值 。 
抛 出 错误 以 表明 此 时 ;in 操作 符 是 非法 的 。 

















抛 出 错误 的 做 法 太极 端 了 ， 而 且 对 只 想 隐 藏 某 些 属性 的 情况 而 言 并 没有 帮助 。 这 只 会 让 人 





知道 这 些 属性 是 受 保护 的 。 但 抛 出 错误 在 一 些 情况 下 是 可 行 的 。 比 如 ， 
什么 操作 失败 ， 那 么 你 就 可 以 在 错误 消息 中 解释 失败 的 原因 。 


最 好 的 做 法 是 通过 返回 fatse 来 告诉 使 用 者 ， 他 们 访问 的 属性 并 不 在 
最 适合 的 做 法 就 是 返回 表达 式 key in target 的 结果 。 























你 想 告诉 使 用 者 为 


(in) 对 象 中 。 此 时 











再 回 到 6.1.2 节 中 的 示例 。 我 们 希望 对 带 有 前 绥 的 属性 的 查询 都 返回 fatse， 对 其 他 属性 的 








查询 则 采用 默认 行为 。 这 样 可 以 对 那些 不 速 之 客 隐 藏 不 可 访问 的 属性 。 








const handler = { 
get(target, key) { 
invariant(key, 'get') 
return Reflect.get(target, key) 
}， 
set(target, key, value) { 
invariant(key, 'set') 
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二 


return Reflect.set(target, key, value) 
二 
has(target, key) { 
if (key.startsWith('_')) { 
return false 


return Reflect.has(target, key) 
} 
} 
function invariant(key, action) { 
if (key.startsWith('_')) { 
throw new Error(‘Can't ${ action } private "${ key }" 
property `) 


} 
此 时 通过 代理 访问 私有 属性 会 返回 fatse， 而 使 用 者 并 不 清楚 这 是 什么 情况 。 他 们 完全 没 
有 意识 到 我 们 是 在 有 意 隐藏 信息 。 但 _secret in target 会 返回 true， 因 为 我 们 绕 过 了 代 


理 。 这 意味 着 我 们 照样 可 以 通过 严格 控制 访问 规则 而 随意 地 操作 底层 对 象 ， 但 使 用 者 必须 
遵守 规则 。 



































const target = { 
_secret: 'securely-stored-value', 
wellKnown: 'publicly-known-value' 
} 
const proxy = new Proxy(target, handler) 
console.1log('wellKnown' in proxy) 
// <- true 
console.log('_secret' in proxy) 
// <- false 
console.log('_secret' in target) 
// <- true 


当然 ， 也 可 以 抛 出 异常 。 将 访问 私有 空间 当成 不 会 导致 无 效 状态 的 错误 时 ， 这 是 合适 的 。 
此 时 它 与 向 第 三 方 网 站 租 入 代码 的 安全 问题 性 质 不 同 。 








注意 ， 要 想 阻 止 0bject#hasOwnProperty 在 私有 空间 找到 属性 ，has 捕获 器 可 帮 不 上 忙 。 


console.log(proxy.hasOwnProperty('_secret')) 
// <- true 


6.4.1 节 介 绍 的 getOwnPropertyDescriptor 捕获 器 也 可 以 拦截 0bject#hasownProperty， 因 此 
可 以 作为 一 个 解决 方案 。 





6.3.2 ”deleteProperty 捕 获 器 


将 某 个 属性 设置 为 undefined 会 清除 它 的 值 ， 但 属性 仍然 还 在 。 但 像 delete cat.furBall 
这 样 使 用 delete 操作 符 则 会 将 属性 彻底 从 cat 对 象 上 删除 。 











前 面 阻止 访问 带 有 前 绥 的 属性 的 示例 存在 问题 : 我 们 不 能 修改 _secret 属性 的 值 ， 甚 至 无 
法 通过 in 操作 符 获 悉 它 是 否 存在 ， 但 还 是 可 以 通过 proxy 对 象 用 delete 操作 符 删除 该 属 


性 ! 


const cat = { furBall: true } 
cat.furBall = undefined 
console.log('furBall' in cat) 
// <- true 

delete cat.furBall 
console.log('furBall' in cat) 
// <- false 




















以 下 代码 展示 了 这 一 点 。 


const target = { _secret: 'foo' } 

const proxy = new Proxy(target, handler) 
console.log('_secret' in proxy) 

// <- false 

console.log('_secret' in target) 

// <- true 

delete proxy._secret 
console.log('_secret' in target) 

// <- false 


我 们 可 以 使 用 handler.deleteProperty 来 阻止 删除 操作 。 与 get 和 set 捕获 器 一 样 ， 在 
deleteProperty 捕获 器 中 抛 出 错误 就 可 以 阻止 删除 某 个 属性 了 。 这 时 候 抛 出 错误 是 可 以 接 
受 的 ， 因 为 我 们 希望 使 用 者 知道 对 带 有 前 组 的 属性 的 外 部 操作 是 禁止 的 。 


const handler = { 
get(target, key) { 
invariant(key, 'get') 
return Reflect.get(target, key) 
}; 
set(target, key, value) { 
invariant(key, 'set') 
return Reflect.set(target, key, value) 
站 
deleteproperty(target, key) { 
invariant(key, 'delete') 
return Reflect.deletePproperty(target, key) 
} 
} 
function invariant(key, action) { 
if (key.startsWith('_')) { 
throw new Error(‘Can't ${ action } private "${ key }" 
property `) 
} 
} 








如 果 目 








了 像 前 面 那 样 删 除 带 有 前 组 的 属性 ， 比 如 从 proxy 删除 _secret， 那 么 会 导致 异常 。 








以 下 示例 展示 了 加 入 deleteProperty 捕获 器 后 的 效果 。 
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Const target = { _secret: 'foo' } 
const proxy = new Proxy(target, handler) 
console.log('_secret' in proxy) 
// <- true 

delete proxy._secret 

// <- Error: Can't delete private 


_secret" property 











通过 proxy 访问 target 的 使 用 者 再 也 不 能 删除 私有 属性 了 。 又 少 了 一 个 麻烦 ! 








6.3.3 defineproperty 捕 获 器 


ES5 引入 的 0bject.defineProperty 国 数 可 以 用 属性 key 和 描述 符 descriptor 给 target 对 
象 添 加 属性 。0bject.defineProperty(target，key，descriptor) 通常 用 于 以 下 两 种 情况 





(1) 希望 getter 和 setter 得 到 跨 浏 览 器 的 支持 。 
(2) 希望 实现 自 定义 的 属性 访问 器 。 











手工 添加 的 属性 是 可 读 的 、 可 写 的 、 可 删 的 、 可 枚 举 的 。 


通过 0bject.defineProperty 添加 的 属性 默认 是 只 读 的 、 不 可 删除 的 、 不 可 枚 举 的 。 此 时 
的 属性 有 点 类 似 用 const 声明 的 绑 定 : 虽然 都 是 只 读 的 ， 但 并 非 不 可 变 。 


使 用 0bject.defineProperty 定义 属性 时 ， 我 们 可 以 通过 属性 描述 符 自 定义 以 下 方面 。 


。 configurable = false 禁用 对 属性 描述 符 的 大 多 数 改 变 ， 同 时 使 属性 不 可 删除 。 

。 enumerable = false 对 for. .in 循环 和 0bject.keys 隐藏 当前 属性 。 

。 writable = false 让 属性 只 读 。 

。 value = undefined 是 当前 属性 的 初始 值 。 

。 get = undefined 是 作为 属性 getter 的 方法 。 

。 set = Undefined 是 作为 属性 setter 的 方法 ， 它 接受 一 个 新 vaLue， 然 后 更 新 属性 的 vaLue。 






























































注意 ， 你 必须 选择 是 配置 value 和 writable， 还 是 配置 get 和 set。 | 你 就 是 在 
配置 一 个 数据 描述 符 。 像 pizza.topping = 'ham' 这 样 创建 普通 属性 也 会 得 到 一 个 数据 描 
述 符 。 此 时 的 topping 有 一 个 value， 它 要 么 是 writable， 要 么 不 是 writable。 选 择 后 者 ， 
你 就 是 在 创建 一 个 访问 器 描述 符 ， 它 完全 由 用 于 该 属性 的 get 和 set(value) 的 方法 决定 。 


以 下 代码 示例 展示 了 两 种 属性 描述 符 ， 这 取决 于 定义 属性 采用 的 是 声明 方式 ， 还 是 编程 
API。 这 里 使 用 了 object.getownPropertyDescriptor， 它 接收 传 入 的 target 对 象 和 key 属 
性 ， 以 取得 我 们 所 创建 属性 的 描述 符 。 























Const pizza = {} 

pizza.topping = 'ham' 

Object.defineProperty(pizza, 'extraCheese', { value: true }) 
console.log(Object.getOwnPropertyDescriptor(pizza, 'topping')) 





// value: 'ham', 

// writable: true, 

// enumerable: true， 
// configurable: true 


console.log( 
Object .getOwnPropertyDescriptor(pizza, 'extraCheese') 
) 
Ll 
// value: true， 
// writable: false, 
// enumerable: false, 
// configurable: false 
1 


handler .defineProperty 捕获 器 用 于 拦截 要 定义 的 属性 。 注 意 ， 这 个 捕获 器 既 可 以 拦截 声 
明 式 定义 ptzza.extraCheese = false， 也 可 以 拦截 API 调用 0bject.defineProperty(pizza， 
'extraCheese'，{ value: false })。 这 个 捕获 器 的 第 一 个 参数 是 target 对 象 ， 第 二 个 参 























数 是 属性 key， 第 三 个 参数 是 描述 符 descriptor。 





以 下 示例 展示 了 如 何 阻止 通过 proxy 给 对 象 添加 属性 。 如 果 处 理 器 返回 false， 属 性 的 声 
明 式 定义 在 严格 模式 下 会 导致 抛 出 异常 ， 在 非 严 格 模式 下 则 会 静默 失败 。 严 格 模式 比 非 严 
格 模式 好 ， 其 严格 的 语义 确保 了 优异 的 性 能 。 因 此 ， 严 格 模式 也 是 ES6 模块 的 默认 模式 ， 





























第 8 章 会 对 此 进行 介绍 。 为 此 ， 本 书 假设 所 有 的 代码 示例 都 是 在 严格 模式 下 运行 的 。 


const handler = { 

defineproperty(target, key, descriptor) { 

return false 

} 
} 
const target = {} 
const proxy = new Proxy(target, handler) 
proxy.extraCheese = false 
// <- TypeError: 'defineProperty' on proxy: trap returned false 








再 回 到 前 级 属性 的 示例 ， 我 们 也 可 以 使 用 defineProperty 捕获 器 来 阻止 通过 代理 创建 私有 
属性 。 以 下 代码 将 重用 invariant 函数 ， 以 抛 出 异常 的 方式 拒绝 在 私有 空间 中 定义 属性 的 





行为 。 


const handler = { 
defineproperty(target, key, descriptor) { 
invariant(key, 'define') 
return Reflect.definePproperty(target, key, descriptor) 
} 
} 


function invariant(key, action) { 
if (key.startsWith('_')) { 
throw new Error(‘Can't ${ action } private "${ key }" 
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property `) 
} 


接 下 来 我 们 用 一 个 target 对 象 来 试 试 。 我 们 会 尝试 声明 一 个 不 带 前 级 的 属性 ， 再 声明 一 个 
带 前 组 的 属性 。 使 用 proxy 在 私有 空间 添加 一 个 属性 会 导致 抛 出 错误 。 











const target = {} 
const proxy = new Proxy(target, handler) 
proxy.topping = 'cheese' 

proxy._secretIngredient = 'salsa’ 
// <- Error: Can't define private 


_secretIngredient" property 








proxy 对 象 通过 一 个 捕获 器 成 功 地 隐藏 了 _secret 属性 ， 该 捕获 器 会 通过 proxy[key] = 
value 和 0bject.defineProperty(proxy，key，{ value }) 隐藏 这 些 属性 。 如 果 再 将 前 面 介 
绍 的 捕获 器 算 进 来 ， 那 我 们 已 经 阻止 了 对 私有 属性 的 读 取 、 写 入 、 查 询 和 创建 。 







































































6.3.4 ”ownKeys 捕 获 器 

handler .ownKeys 方法 可 以 返回 一 个 属性 数组 ， 而 这 个 数组 也 是 Reflect.ownKeys() 的 结 
果 。 数 组 中 应 该 包含 target 对 象 的 所 有 属性 ， 可 枚 举 的 、 不 可 枚 举 的 ， 以 及 符号 属性 。 与 
之 前 一 样 ， 默 认 实现 可 以 直接 返回 对 被 代理 的 target 对 象 执行 反射 方法 的 结果 。 














const handler = { 
ownKeys(target) { 
return Reflect.ownKeys(target) 
} 
} 


拦截 并 不 会 影响 0bject.keys 的 输出 








因为 我 们 只 是 简单 地 将 访问 转发 给 了 默认 实现 。 











区 


const target = { 
[Symbol('id')]: 'ba3dfccO', 
_secret: 'sauce', 
_toppingCount: 3， 
toppings: ['cheese', 'tomato', 'bacon'] 


const proxy = new Proxy(target, handler) 
for (const key of Object.keys(proxy)) { 
console. log(key) 
// <- '_secret' 
// <- '_toppingCount' 
// <- 'toppings’ 
} 


注意 ，ownKeys 捕获 器 适用 于 以 下 所 有 操作 。 


。 Reflect.ownKeys() 返回 对 象 上 所 有 自己 的 键 。 
。 0bject.getOwnPropertyNames() 只 返回 非 符号 属 





性 。 
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。 0bject.getOwnPropertySymbols() 只 返回 符号 属性 。 
。 0bject.keys() 只 返回 非 符号 可 枚 举 属 性 。 
。 for..in 只 返回 非 符号 可 枚 举 属性 。 























想 要 阻止 访问 带 有 前 级 的 属性 上 时， 我 们 可 以 先 取 得 Reflect.ownKeys(target) 的 输出 ， 然 
后 从 中 过 滤 掉 带 有 前 级 的 属性 。 这 也 正 是 0bject.getOwnPropertysSymbols() 方法 内 部 采取 
的 策略 。 




















以 下 示例 对 Reflect.ownKeys(target) 的 结果 进行 了 过 滤 ， 只 要 不 是 字符 串 ( 那 就 是 
Symbol 属性 )， 则 返回 true。 然 后 过 滤 掉 是 字符 串 但 以 _ 开头 的 属性 。 








const handler = { 
ownKeys(target) { 
return Reflect.ownKeys(target).filter(key => { 
const isStringKey = typeof key === 'string' 
if (isStringKey) { 
return !key.startsWith('_') 
} 
return true 
}) 
} 
} 

















如 果 在 前 面 的 代码 中 使 用 这 里 定义 的 handler， 那 通过 proxy 只 能 取得 非 私 有 属性 。 注 意 ， 
这 里 也 没有 返回 Symbol 属性， 因为 0bject.keys 在 返回 结果 前 过 着 了 Symbol 属性 。 























const target = { 
[Symbol('id')]: 'ba3dfccO', 
_secret: 'sauce', 
_toppingCount: 3， 
toppings: ['cheese', 'tomato', 'bacon'] 
} 
const proxy = new Proxy(target, handler) 
for (const key of Object.keys(proxy)) { 
console. log(key) 
// <- 'toppings' 
} 


这 并 不 影响 枚 举 Symbol 属性 ， 因 为 前 面 的 handler 并 未 过 滤 掉 Symbol 属 
的 类 型 是 symboL， 因 此 .filter 函数 返回 true。 


隆 。Ssymbot 属 


席 

















const target = { 
[Symbol('id')]: 'ba3dfccO', 
_secret: 'sauce', 
_toppingCount: 3， 
toppings: ['cheese', 'tomato', 'bacon'] 
} 
const proxy = new Proxy(target, handler) 
for (const key of Object.getOwnPropertySymbols(proxy)) { 
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console. log(key) 
// <- Symbol(id) 
} 
在 符号 及 其 他 属性 不 受 影响 的 情况 下 ， 我 们 成 功 地 对 枚 举 操 作 隐藏 了 带 前 级 “_” 的 属性 。 
更 重要 的 是 ， 一 个 ownKeys 捕获 器 就 涵盖 了 所 有 的 枚 举 操作 ， 因 此 我 们 无 须 动用 多 个 捕获 
器 。 唯 一 要 注意 的 是 ， 处 理 Symbol 属性 时 必须 小 心 一 点 


6.4 高 级 代理 捕获 器 

到 目前 为 止 ， 我 们 介绍 的 捕获 器 基本 上 都 与 属性 访问 和 操作 相关 。 除 了 接 下 来 介绍 的 捕获 
器 与 属性 访问 相关 ， 本 章 后 面 介绍 的 其 他 捕获 器 不 再 与 属性 相关 ， 而 是 与 要 代理 的 对 象 本 
身 相关 。 

































































6.4.1 getOwnPropertyDescriptor 捕 获 器 

在 查询 对 象 的 某 个 属性 描述 符 时 ，getOwnPropertyDescriptor 捕获 器 会 触发 。 如 果 属 性 存 
在 ， 那 么 它 应 该 返回 该 属性 的 描述 符 ， 否 则 返回 undefined。 当 然 ， 你 也 可 以 抛 出 异常 ， 
完全 中 断 这 个 操作 。 

如 果 再 以 经 典 的 私有 属性 为 例 ， 那 么 我 们 可 以 实现 一 个 捕获 器 ， 以 阻止 使 用 者 进一步 取得 
私有 属性 的 描述 符 ， 如 下 所 示 。 

















const handler = { 
getOwnPropertyDescriptor(target, key) { 
invariant(key, 'get property descriptor for') 
return Reflect.getOwnPropertyDescriptor(target, key) 
} 
} 
function invariant(key, action) { 
if (key.startsWith('_')) { 
throw new Error(‘Can't ${ action } private "${ key }" property') 
} 
} 
const target = {} 
const proxy = new Proxy(target, handler) 
Reflect.getOwnPropertyDescriptor(proxy, '_secret') 
// <- Error: Can't get property descriptor for private 
// "_secret" property 











这 样 做 的 问题 是 ， 你 其 实 已 经 告诉 外 部 用 户 他 们 正在 未 授权 的 情况 下 访问 带 有 前 级 的 属性 。 
此 时 最 好 还 是 返回 undefined 来 完全 隐藏 私有 属性 。 这 样 私 有 属性 的 表现 就 与 target 对 象 
确实 没有 的 那些 属性 没什么 区 别 了 。 以 下 示例 表明 ， 通 过 0bject .getOwnPropertyDescriptor 
查询 一 个 不 存在 的 属性 与 查询 _secret 属性 的 结果 相同 。 不 在 私有 空间 内 的 常规 属性 会 返回 
常规 的 描述 符 。 
























































const handler = { 
getOwnPropertyDescriptor(target, key) { 
if (key.startswith('_')) { 
return 


return Reflect.getOwnPropertyDescriptor(target, key) 
} 
} 
const target = { 
_secret: 'sauce', 
topping: 'mozzarella’ 


const proxy = new Proxy(target, handler) 
console.log(Object.getOwnPropertyDescriptor(proxy, 'dressing')) 
// <- undefined 

console.log(Object .getOwnPropertyDescriptor(proxy, 
// <- undefined 
console.log(Object.getOwnPropertyDescriptor(proxy, 'topping')) 
Ap 

// value: 'mozzarella', 

// writable: true, 

// enumerable: true， 

// configurable: true 


// } 


_secret')) 


getOwnPropertyDescriptor 捕获 器 可 以 拦截 0bject#hasOwnProperty 的 实现 ， 后 者 依赖 属性 


描述 符 来 确认 属性 是 否 存在 。 








consoLe.Log(proxy.hasOwnProperty( 'topping ' )) 
// <- true 
console.log(proxy.hasOwnProperty('_secret')) 
// <- false 





在 隐藏 信息 时 ， 最 好 能 将 它们 归 到 一 个 不 同 于 原先 类 别 的 其 他 类 别 ， 这 样 既 可 以 隐藏 它们 
的 踪迹 ， 又 不 会 影响 其 他 操作 。 如 果 为 隐藏 信息 而 抛 出 错误 ， 那 就 会 引 人 怀 疑 : 为 什么 它 
抛 出 错误 ， 而 不 是 返回 undefined ? 这 个 属性 一 定 存在 ， 只 是 不 允许 访问 。 这 与 HTTP API 
设计 中 对 敏感 资源 返回 “404 Not Found” 没 什么 不 同 。 比 如 ， 当 无 权 用 户 访问 管理 后 台 
时 ， 尽 管 技术 上 正确 ， 但 不 要 返回 “401 Unauthorized”。 



































如 有 果 排 错 的 优先 级 高 于 安全 考量 ， 则 可 以 考虑 使 用 throw。 不 管 怎样 ， 只 有 充分 理解 使 用 
场景 才能 找 出 最 优 及 干扰 最 少 的 方案 。 





6.4.2 ”apptLy 捕 获 器 
apply 捕获 器 很 有 意思 ， 它 是 专门 为 国 数 量 身 定 制 的 。 当 代理 的 target 函数 被 调用 时 ，apply 
区 器 就 会 触发 。 以 下 代码 示例 中 的 所 有 语句 都 会 通过 代理 的 handler 对 象 的 apply 捕获 器 。 













































































proxy('cats', 'dogs') 
proxy(...['cats', 'dogs']) 
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proxy.call(null, 'cats', 'dogs') 
proxy.apply(null, ['cats', 'dogs']) 
Reflect.apply(proxy, null, ['cat', 'dogs']) 


apply 捕获 器 接受 三 个 参数 : 


。 target 是 被 代理 的 函数 ，; 
。 ctx 是 函数 被 调用 时 作为 target 中 this 值 的 上 下 文 对 象 ; 
。 args 是 一 个 函数 被 调用 时 传 给 target 的 数组 。 























不 修改 输出 的 默认 实现 会 返回 调用 Reflect.apply 的 结果 。 


const handler = { 
apply(target, ctx, args) { 
return Reflect.apply(target, ctx, args) 
} 
} 


除了 能 够 打印 每 次 通过 proxy 调用 函数 时 的 参数 ， 这 个 捕获 器 还 可 以 用 于 添加 额外 的 参数 
或 修改 函数 调用 的 结果 。 所 有 这 些 功 能 都 可 以 在 不 改变 底层 target 函数 的 前 提 下 实现 ， 因 
此 这 个 捕获 器 可 以 重用 于 需要 同样 额外 功能 的 任何 函数 。 














以 下 示例 代理 sum 函数 时 应 用 了 twice 处 理 器 ， 它 通过 apply 捕获 器 将 每 次 求 和 的 结果 都 
乘 以 2。 如 有 果 不 直 接 调用 sum， 而 是 调用 proxy， 那 么 结果 就 总 能 翻 倍 ， 而 且 不 影响 原先 的 
代码 。 




















Const twice = { 
apply(target, ctx, args) { 
return Reflect.apply(target, ctx, args) * 2 
} 
} 


function sum(a, b) { 
return a + b 


人 


const proxy = new Proxy(sum, twice) 

console.log(proxy(1, 2)) 

// <- 6 
我 们 再 来 看 看 男 一 种 情况 。 假 设 我 们 想 要 在 调用 不 同 函数 时 都 保持 上 下 文 this 不 变 。 以 下 
示例 定义 了 一 个 logger 对 象 ， 它 有 一 个 test 方法 ， 可 以 返回 Logger 对 象 自己 。 








Const Logger = { 
test() { 
return this 


} 
} 


要 想 每 次 调用 test 方法 都 返回 logger ， 那 么 我 们 可 以 将 test 与 Logger 绑 定 起 来 ， 如 下 
所 示 。 
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Logger .test = logger.test.bind(logger) 


问题 是 ， 对 于 Logger le 如 果 想 要 确保 函数 内 部 的 this 指向 Logger， 那 
么 我 们 必须 这 样 绑 定 一 次 。 另 一 种 办 法 是 借助 一 个 自 定 义 get 捕获 器 的 代理 ， 如 果 返 回 的 
是 函数 ， 则 il target 对 象 。 























const selfish = { 
get(target, key) { 
const value = Reflect.get(target, key) 


if (typeof value !== 'function') { 
return value 

} 

return value.bind(target) 


} 
} 


const proxy = new Proxy(logger, selfish) 


这 个 实现 对 任何 对 象 (包括 类 ) 都 适用 ， 而 且 不 必 做 什么 修改 。 以 下 代码 展示 了 原来 的 
Logger 很 容易 被 .call 攻击 ， 从 而 改变 this 的 指向 。 但 proxy 对 象 面 对 同样 的 攻击 则 完全 


不 受 影 响 。 

















const something = {} 


console.log(logger .test() === logger) 

// <- true 

console.log(logger .test.call(something) === something) 
// <- true 

console.log(proxy.test() === logger) 

// <- true 

console.log(proxy.test.call(something) === logger) 

// <- true 


不 过 ， 像 这 样 借助 selfish 保持 上 下 文 也 有 一 个 小 问题 ， 即 每 次 通过 proxy 获得 函数 的 引 
用 时 ， 都 是 调用 value.bind(target) 返回 的 一 个 全 新 的 绑 定 版 国 数 。 相 应 地 ， 国 数 与 函数 
就 不 相等 了 。 这 可 能 会 导致 一 些 令 人 困惑 的 行为 ， 如 下 所 示 。 














console.log(proxy.test !== proxy.test) 
// <- true 


个 问题 可 以 通过 WeakMap 解决 。 我 们 可 以 将 selfish 改写 成 一 个 工厂 函数 。 在 这 个 函数 
~ 我 们 通过 cache 保留 一 份 已 经 绑 定 方法 的 缓存 ， 这 样 每 个 函数 就 只 会 创建 一 个 绑 定 
版 。 同 时 ， 我 们 还 让 selfish 函数 接收 一 个 想 要 被 代理 的 target 对 象 。 如 此 一 来 ， 将 方法 
绑 定 到 哪个 对 象 就 是 实现 要 考虑 的 问题 了 。 





























function selfish(target) { 
const cache = new WeakMap() 
const handler = { 
get(target, key) { 
const value = Reflect.get(target, key) 
if (typeof vaLue !== 'function') { 
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} 


return value 


} 
if (!cache.has(value)) { 
cache.set(value, value.bind(target)) 


} 


return cache.get(value) 


} 


const proxy = new Proxy(target, handler) 
return proxy 


} 


现在 ， 我 们 可 以 缓存 绑 定 的 函数 并 通过 原始 值 来 跟踪 它们 了 ， 而 且 每 次 都 能 返回 





象 。 再 进行 以 下 这 样 的 简单 比较 就 不 会 令 人 惊讶 了 。 





const selfishLogger = selfish(logger) 
console.log(selfishLogger .test === selfishLogger .test) 
// <- true 

console.log(selfishLogger.test() === selfishLogger) 

// <- true 
console.log(selfishLogger.test.call(something) === 


selfishLogger) 


// <- true 


相同 的 对 


当 我 们 想 让 对 象 的 所 有 方法 都 绑 定 到 宿主 对 象 时 ，selfish 函数 可 以 重用 于 任何 对 象 。 这 


对 类 非常 有 用 ， 因 为 类 非常 依赖 于 this 指向 实例 对 象 。 
将 方法 绑 定 到 父 对 象 的 办 法 非常 多 ， 各 有 优 缺 点 。 使 用 代理 可 





本 








是 其 中 最 方便 的 、 





少 的 ， 只 是 浏览 器 的 支持 还 不 够 好 ， 而 且 Proxy 的 实现 比较 慢 。 


我 们 并 没有 在 selfish 的 例子 中 用 到 apply 捕获 器 ， 这 表明 并 不 是 所 有 东西 都 外 


麻烦 最 





E 通 用 。 如 


果 在 这 种 情况 下 使 用 apply 捕获 器 ， 那 么 selfish 就 要 返回 value 函数 的 代理 ， 然 后 在 
value 代理 的 apply 捕获 器 中 再 返回 一 个 绑 定 的 函数 。 这 听 起 来 似乎 更 正确 ， 因 为 没有 


用 .bind 而 使 用 了 ReftLect.appLy， 但 我 们 还 是 需要 WeakMap 缓存 和 selfish 代理 。 
点 分 离 和 可 维护 的 角度 来 说 ， 我 们 需要 额外 添加 一 层 抽 象 ， 还 要 使 用 第 二 个 代理 ， 























H 
日 





到 一 个 值 。 考 虑 到 两 个 代理 层 之 间 一 定 会 存在 某 种 程度 的 耦合 ， 最 好 还 是 将 所 有 


装 在 一 个 抽象 层 中 。 抽 象 虽 好 ， 但 过 多 的 抽象 可 能 比 原来 要 解决 的 问题 还 要 难以 处 理 。 





从 关注 


逻辑 都 封 




















在 类 的 构造 器 中 使 用 .bind 语句 实现 抽象 时 ， 怎 样 才 算 合理 ? 此 类 问题 通常 没有 唯一 的 答 
案 ， 视 具体 情况 而 定 。 但 在 设计 组 件 系统 时 ， 这 些 是 必须 要 考虑 的 。 增 加 抽象 层 可 以 避免 
重复 自己 ， 从 而 避免 为 解决 复杂 的 问题 而 将 事情 复杂 化 。 


6.4.3 


construct 捕获 器 拦截 的 是 new 操作 符 的 调 月 





construct 捕 获 器 














歼 器 9» 入 





行为 与 construct 捕获 器 一 致 。 这 里 用 到 了 扩展 操作 符 和 new 关键 字 ， 








日。 以 下 代码 实现 了 一 个 自 定义 的 construct 捕 





因此 我 们 





可 以 向 Target 构造 函数 传 入 任何 参数 。 


const handler = { 
construct(Target, args) { 
return new Target(...args) 
} 
} 


前 面 的 示例 与 使 用 Reflect.construct 效果 相同 ， 如 下 所 示 。 但 是 这 里 没有 使 用 扩展 操作 
符 。 反 射 方法 镜像 了 代理 捕获 器 的 方法 签名 ， 因 此 Reflect.construct 的 签名 同样 也 包含 
Target，args， 与 construct 捕获 器 方法 相同 。 











一 | 











const handler = { 
construct(Target, args) { 
return Reflect.construct(Target, args) 
} 
} 


使 用 construct 捕获 器 不 需要 工厂 函数 即 可 修改 或 扩展 对 象 的 行为 ， 其 至 改变 其 实现 。 但 
注意 ， 代 理 的 目的 必须 要 明确 ， 而 且 这 个 目的 不 能 过 于 扰乱 底层 对 象 的 实现 。 具 体 来 说 ， 
将 construct 代理 捕获 器 当 作 开 关 来 切换 不 同 的 底层 类 就 不 是 好 的 抽象 思路 ， 因 为 一 个 简 
单 的 函数 就 够 用 了 。 


construct 捕获 器 最 常见 的 用 例 是 重组 构造 器 的 参数 或 做 一 些 本 应 由 构造 器 来 做 的 寻 
如 记录 日 志 或 记录 创建 的 对 象 实例 。 
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以 下 示例 展示 了 在 不 改变 类 实现 的 情况 下 ， 如 何 通 过 代理 向 部 分 使 用 者 提供 不 同 的 体验 。 
在 使 用 ProxiedTarget 时 ， 我 们 可 以 用 构造 器 参数 在 目标 实例 上 声明 一 个 name 属性 。 














const handler = { 
construct(Target, args) { 
const [ name ] = args 
const target = Reflect.construct(Target, args) 
target.name = name 
return target 


} 


class Target { 
hello() { 
console.log( ‘Hello, ${ this.name }!°) 
} 
} 


对 这 个 例子 而 言 ， 我 们 可 以 直接 修改 Target， 让 它 在 构造 器 中 接收 一 个 name 参数 ， 并 将 
其 保存 为 实例 属性 。 但 现实 往往 不 允许 我 们 这 么 做 。 由 于 种 种 原因 ， 我 们 可 能 无 法 直接 修 
改 这 个 类 ， 比 如 代码 不 是 我 们 编写 的 ， 或 者 已 经 有 别 的 代码 依赖 于 当前 的 对 象 结构 。 以 下 
代码 展示 了 使 用 Target 的 实际 情形 ， 既 有 其 自己 的 API， 也 有 基于 construct 捕获 器 修改 
的 ProxiedTarget API。 



































十 
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const target = new Target() 
target.name = 'Nicolés' 
target.hello() 

// <- 'Hello, Nicolés’ 


const ProxiedTarget = new Proxy(Target, handler) 
const proxy = new ProxiedTarget('Nicolés') 


proxy.hello() 
// <- 'Hello, Nicolés’ 


注意 ， 箭 头 函 数 不 能 用 作 构 造 器 ， 否 则 不 能 对 这 个 类 使 用 construct 捕获 器 。 接 下 来 我 们 
再 看 看 剩 下 的 几 个 捕获 器 


6.4.4 getpPrototypeof 捕 获 器 
我 们 可 以 使 用 handler .getPrototype0f 方法 作为 捕获 器 来 拦截 以 下 所 有 操作 。 




















。 访问 0bject#_ proto__ 属性 。 

。 调用 0bject#isPrototype0f 方法 。 

。 调用 0bject#getPrototypeof 方法 。 
。 调用 Reflect.getPrototype0f 方法 。 
。 使 用 instanceof 操作 符 。 


这 个 捕获 器 很 强大 ， 因 为 我 们 可 以 通过 它 动态 地 指定 要 报告 的 底层 对 象 的 原型 。 


比如 ， 我 们 可 以 使 用 这 个 捕获 器 让 某 个 对 象 在 通过 代理 访问 时 被 当成 Array。 以 下 代码 就 
实现 了 这 样 一 个 代理 ， 它 返回 Array.prototype 作为 被 代理 对 象 的 原型 。 注 意 ， 测 试 代理 
对 象 是 否 为 Array 的 实例 时 ，instanceof 操作 符 确 实 返回 了 true。 




































































const handler = { 

getPrototypeOf: target => Array.prototype 
} 
const target = {} 
const proxy = new Proxy(target, handler) 
console.log(proxy instanceof Array) 
// <- true 




















实际 上 ， 代 理 对 象 本 身 还 不 是 数组 。 以 下 代码 表明 ， 尽 管 测 试 显示 代理 对 象 是 一 个 数组 ， 
但 这 个 对 象 上 并 没有 Array#push 方法 。 





console.log(proxy.push) 
// <- undefined 


当然 ， 我 们 可 以 继续 “装扮 ”代理 对 象 ， 让 它 最 终 拥有 数组 的 行为 。 为 此 ， 我 们 需要 使 
用 get 捕获 器 让 Array. tet 成 为 实际 后 端 对 象 target 的 替补 。 如 果 哪 个 属性 无 法 在 
target 上 找到 ， 则 可 以 再 次 通过 反射 到 Array.prototype 上 查找 。 事 实证 明 ， 可 以 在 对 象 





























上 使 用 数组 的 方法 。 


const handler = { 
getPprototypeOf: target => Array.prototype, 
get(target, key) { 
return ( 
Reflect.get(target, key) || 
Reflect.get(Array.prototype, key) 
) 
} 
} 
const target = {} 
const proxy = new Proxy(target, handler) 


注意 ， 此 时 的 proxy.push 指向 的 是 Array#push 方法 。 我 们 可 以 像 使 用 数组 那样 不 动 声 
色 地 使 用 代理 对 象 ， 同 时 打印 出 来 的 代理 对 象 显示 它 还 是 对 象 ， 并 不 是 数组 ['first'， 


'second']。 








console.log(proxy.push) 

// <- function push() { [native code] } 
proxy.push('first', 'second') 
console.log(proxy) 

// <- { 0: 'first', 1: 'second', length: 2 } 





与 getPrototypeof 捕获 器 相对 的 是 setPrototypeOf 。 

















6.4.5 ”setPrototype0f 捕 获 器 

ES6 有 一 个 0bject.setPrototype0f 方法 ， 用 于 将 一 个 对 象 的 原型 设置 成 另 一 个 对 象 。 与 使 
用 特殊 属性 __proto_ 相 比 ， 这 是 改变 对 象 原型 的 首选 方式 ， 虽 然 多 数 浏 览 器 都 支持 前 者 ， 
但 ES6 已 将 其 废弃 。 

















废弃 的 意思 是 浏览 器 不 再 认可 使 用 __proto_。 如 果 是 不 同 的 运行 时 ， 这 可 能 意味 着 这 个 
属性 将 来 会 被 删除 。 但 Web 平台 不 会 出 现 向 后 不 兼容 的 情况 ， 因 此 __proto__ 属性 不 会 消 
失 。 尽 管 如 此 ， 废 弃 的 属性 终究 是 废弃 的 属性 ， 最 好 别 再 使 用 。 记 住 ， 如 果 以 后 需要 修改 
对 象 的 原型 ， 尽 量 使 用 0bject.setPrototype0f ， 不 要 使 用 _proto__。 

















我 们 可 以 用 handter.setPrototypeOf 来 设置 0bject.setPrototypeof 的 捕获 器 。 以 下 代码 并 
没有 改变 将 原型 修改 为 base 的 默认 行为 。 注 意 ， 还 有 一 个 与 这 里 的 Object.setPrototypeof 
等 价 的 反射 方法 : RefLect.setPrototypeOf 。 

















const handler = { 
setprototypeOf(target, proto) { 
Object.setPrototypeOf(target, proto) 
} 


const base = {} 
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function Target() {} 

const proxy = new Proxy(Target, handler) 
proxy.setPprototypeOf(proxy, base) 
console.log(proxy.prototype === base) 

// <- true 


setpPrototypeof 捕获 器 也 有 一 些 使 用 场景 。 比 如 ， 我 们 可 以 编写 一 个 空 方法 体 ， 然 后 通过 
捕获 右 “ 节 发 ”对 0bject,setPrototypeof 的 调用 ， 也 就 是 什么 都 不 做 。 如 果 你 认为 新 原 
型 有 问题 或 者 就 想 阻 止 用 户 修改 被 代理 对 象 的 原型 ， 也 可 以 通过 抛 出 错误 明确 地 告知 用 户 
操作 失败 。 


你 可 以 像 以 下 这 样 实现 捕获 器 。 如 果 这 个 代理 被 传 给 第 三 方 代 码 ， 那 么 限制 对 底层 Target 
的 访问 可 以 减少 一 些 安全 威胁 。 这 样 一 来 ， 代 理 的 使 用 者 就 无 法 修改 底层 对 象 的 原型 。 























const handler = { 
setprototypeOf(target, proto) { 
throw new Error('Changing the prototype is forbidden') 


} 


const base = {} 

function Target() {} 

const proxy = new Proxy(Target, handler) 
proxy.setPprototypeOf(proxy, base) 

// <- Error: Changing the prototype is forbidden 


此 时 最 好 抛 出 一 个 提示 操作 失败 的 异常 ， 让 用 户 知道 发 生 了 什么 。 显 式 禁 止 修改 原型 后 ， 


用 户 才 会 考虑 其 他 选择 。 如 果 不 抛 出 异常 ， 用 户 最 终 可 能 也 会 通过 调试 发 现 原 来 不 允许 修 
改 原型 。 与 其 眼睁睁 看 着 用 户 浪 费时 间 ， 不 如 直截了当 地 告诉 他 们 原因 。 





























6.4.6 ”preventExtensions 捕 获 器 
我 们 可 以 用 handler .preventExtensions 来 捕获 ES5 新 增 的 0bject.preventExtensions 方 
法 。 被 阻止 扩展 后 ， 就 不 能 给 对 象 新 增 属性 了 ， 因 为 不 允许 扩展 对 象 。 


想象 一 下 ， 你 希望 可 以 选择 性 地 阻止 对 一 些 对 象 的 扩展 ， 而 不 是 全 部 阻止 。 此 时 可 以 用 
WeakSet 来 保存 可 扩展 对 象 。 如 果 对 象 在 这 个 集合 中 ， 那 么 preventExtensions 可 以 捕获 相 
应 的 请 求 ， 然 后 就 地 丢弃 它们 。 


以 下 代码 实现 了 上 述 场景 : 将 可 扩展 对 象 保 存在 一 个 weakset 中 ， 并 阻止 其 他 对 象 被 扩展 。 



































const canExtend = new WeakSet() 
const handler = { 
preventExtensions(target) { 
const canpPrevent = !canExtend.has(target) 
if (canprevent) { 
Object.preventExtensions(target) 





return Reflect.preventExtensions(target) 
} 
} 


有 了 WeakSet 和 handter 后 ， 我 们 就 可 以 创建 一 个 目标 对 象 及 其 代理 ， 然 后 将 目标 对 象 
添加 到 集合 中 。 接 着 尝试 在 代理 上 执行 0bject.preventExtensions， 我 们 会 发 现 阻 止 对 
target 进行 扩展 并 未 成 功 。 这 正 是 我 们 想 要 的 ， 因 为 target 位 于 canExtend 集合 。 需 要 注 
意 的 是 ， 虽 然 我 们 在 这 里 看 到 了 一 个 TypeError 异常 (因为 使 用 者 试图 阻止 扩展 的 操作 被 
和 获 到 并 丢弃 了 ) ， 但 非 严格 模式 下 只 会 静默 失败 。 







































































Const target = {} 

const proxy = new Proxy(target, handler) 
canExtend.add(target) 
Object.preventExtensions(proxy) 

// 捕获 器 返回 false 

// trap returned falsy 





如 果 先 将 target 从 canExtend 和 集合 中 删 掉 ， 再 调用 Object.preventExtenstons， 那 么 target 
就 会 像 最 初 那样 变 得 不 能 扩展 了 。 以 下 代码 展示 了 这 个 过 程 。 











Const target = {} 

const proxy = new Proxy(target, handler) 
canExtend.add(target) 
canExtend.delete(target) 
Object.preventExtensions(proxy) 
console.log(Object.isExtensible(proxy)) 
// <- false 


6.4.7 ”isExtensible 捕 获 器 

可 扩展 对 象 就 是 可 以 为 其 添加 属性 的 对 象 。 换 句 话 说， 你 可 以 扩展 这 个 对 象 。 

handler .isExtensible 方法 可 以 用 于 记录 或 监督 对 0bject.isExtensible 的 调用 ， 但 不 能 
左右 对 象 是 否 可 以 扩展 的 事实 。 这 是 因为 这 个 捕获 器 被 施加 了 严格 的 控制 :如果 0bject. 
isExtensible(proxy) !== 0bject.isExtensibLe(target)， 则 抛 出 TypeError。 我 们 能 通过 
这 个 捕获 器 做 的 事情 极其 有 限 。 

虽然 这 个 捕获 器 除了 监督 记录 几乎 没什么 用 ， 但 如 果 不 想 让 用 户 知 道 底 层 对 象 是 否 可 扩 
展 ， 我 们 还 可 以 抛 出 错误 。 






























































正如 前 面 所 说 ， 代 理 的 用 途 其 实 非 常 广泛 。 以 下 列举 了 一 些 可 以 用 代理 完成 的 事情 ， 但 这 
些 只 是 冰山 一 角 。 

















。 给 简单 JavaScript 对 象 添加 验证 规则 并 强制 验证 。 
。 监控 通过 代理 对 底层 对 象 执行 的 每 一 次 操作 。 
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。 实现 你 自己 的 可 观察 对 象 。 

。 在 不 改变 底层 实现 的 前 提 下 装饰 和 扩展 对 象 。 

。 让 对 象 的 某 些 属性 对 外 部 用 户 完全 不 可 见 。 

。 只 要 你 认为 用 户 不 应 该 再 访问 某 个 对 象 ， 随 时 可 以 撤销 其 访问 权 。 
。 修改 传递 给 被 代理 方法 的 参数 。 

。 修改 被 代理 方法 返回 的 结果 。 

。 通过 代理 阻止 删除 某 些 属性 。 

。 根据 期 望 的 属性 描述 符 阻 止 定义 新 的 属性 。 

。 调控 类 构造 器 中 的 参数 。 
。 返回 非 new 及 构造 器 创建 的 结果 。 
。 给 对 象 换个 原型 。 


代理 是 ES6 中 极其 强大 的 新 特性 ， 有 着 极其 广泛 的 应 用 ， 它 们 本 身 也 是 精心 规划 、 反 复 推 
敲 的 结果 。 就 当前 的 JavaScript 引擎 而 言 ， 与 代理 相关 的 操作 的 性 能 还 不 够 理想 ， 而 且 几 
平 不 可 能 优化 。 因 此 ， 对 于 追求 极致 性 能 的 应 用 来 说 ， 代 理会 显得 有 点 力不从心 。 

与 此 同时 ,试图 做 太 多 事情 的 复杂 代理 也 会 让 使 用 者 感到 困惑 。 我 们 的 建议 是 ， 一 般 情况 
下 不 必 考 虑 使 用 代理 ， 除 非 有 简明 可 循 的 使 用 规则 。 如 果 使 用 代理 ， 那 么 一 定 要 确保 副 作 
用 不 会 太 多 ， 否 则 即使 有 文档 ， 也 可 能 将 问题 复杂 化 。 
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至 此 ， 我 们 讨论 了 所 有 的 新 语法 ， 比 如 对 象 属性 值 简写 、 箭 头 函 数 、 解 构 及 生成 器 。 我 们 
还 讨论 了 所 有 的 新 内 置 API， 如 WeakMap、Proxy 及 Symbol。 本 音 将 聚焦 于 那些 在 ES6 问世 
前 就 已 经 存在 ， 且 在 ES6 中 被 加 以 改进 的 内 置 API。 这 些 改进 主要 包括 大 部 分 的 新 实例 方 
法 、 属 性 以 及 工具 方法 。 


7.1 数字 
ES6 引入 了 二 进 制 和 八进制 的 数字 字面 量 表示 。 











7.1.1 二 进 制 和 八进制 字面 量 
在 ES6 问世 前 ， 当 涉及 解析 二 进 制 整数 时 ， 最 好 的 做 法 是 将 它们 传人 parseInt 中 ， 并 带 
上 基数 2。 








parseInt('101', 2) 
// <- 5 


现在 你 可 以 使 用 一 个 新 的 前 绥 9b 来 表示 二 进 制 整数 ， 你 也 可 以 使 用 前 缀 98B， 其 中 B 大 写 。 
这 两 种 形式 是 等 价 的 。 


























console.log(0b000) // <- 0 
console.log(0b001) // <- 1 
console.log(0b010) // <- 2 
console.log(0b011) // <- 3 
console.log(0b100) // <- 4 
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console.log(0b101) // <- 5 
ConsoLe.Log(0b110) // <- 6 
consoLe.Log(0b111) // <- 7 





在 ES3 中 ，parseInt 将 以 9 开头 的 数字 字符 串 视 为 一 个 八进制 数值 。 然 而 ,一 旦 你 忘记 
名 定 基数 为 18， 事 情 就 会 变 得 奇怪 起 来 。 因 此 ， 为 了 避免 912 这 样 的 输入 被 不 小 心 解析 为 
10， 指 定 19 为 基数 成 为 了 最 佳 实践 。 

console.log(parseInt('01')) 

1/ <- 1 

ConsoLe.Log(parseInt('012' )) 

// <- 10 

console.log(parseInt('012', 10)) 

// <- 12 


当 ES5 的 时 代 来 临 ，parseInt 的 默认 基数 从 8 变 成 了 19。 但 为 了 向 后 兼容 ， 官 方 依旧 建议 
肯定 一 个 基数 。 要 想 将 一 个 字符 串 解 析 为 八进制 数值 ， 就 需要 明确 地 传人 一 个 基数 8 作为 
第 二 个 参数 。 





console.log(parseInt('100', 8)) 
// <- 64 





在 ES6 的 新 规范 中 ， 你 可 以 使 用 %o 前 缀 来 表示 八进制 数值 。 你 也 可 以 使 用 60 前 缀 ， 两 种 
形式 是 等 价 的 。 然 而 ，9 加 上 大 写 的 0 在 某 些 字体 中 很 难 区 分 ， 这 就 是 官方 建议 使 用 小 写 
9o 的 原因 。 




















ConsoLe.Log(0o001) // <- 1 
ConsoLe.Log(0o010) // <- 8 
ConsoLe.Log(0o100) // <- 64 





在 其 他 语言 中 ， 你 可 能 习惯 于 用 0x 前 绥 来 表示 十 六 进 制 数值 。 这 样 的 写法 早 在 ES5 就 引 
入 JavaScript 了 。 这 种 十 六 进 制 数字 的 前 缀 可 以 写成 gx 或 者 9X， 如 下 所 示 。 





ConsoLe.Log(0xoff) // <- 255 
ConsoLe.Log(0xf00) // <- 3840 


除了 以 上 介绍 的 关于 二 进 制 和 八进制 语法 的 少量 变动 外 ，ES6 还 为 Number 对 象 增添 了 
一 些 其 他 方法 。 接 下 来 我 们 将 探讨 Number 对 象 的 前 四 个 方法 : Number.isNaN、Number . 
isFinite、Number.parseInt 和 Number.parseFLoat。 它 们 已 经 作为 国 数 存在 于 全 局 命名 空 
间 中 。 然 而 ，Number 对 象 中 的 这 些 方法 有 些许 不 同 ， 即 它们 不 会 在 产生 结果 前 强制 地 将 非 
数字 值 转换 为 数字 。 

















7.1.2 Number .LSsNaN 


这 个 方法 和 全 局 的 isNaN 几乎 相同 。 不 同 点 是 ，Number .isNaN 的 返回 值 是 判断 传人 的 value 
是 否 为 NaN 的 结果 ， 而 isNaN 的 返回 值 是 判断 传人 的 value 是 否 为 非 数字 的 结果 。 这 两 个 























-A 
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问题 的 答案 稍 有 不 同 。 


以 下 代码 表明 ， 任 何 传 入 Number .isNaN 的 非 NaN 值 都 会 返回 false， 只 有 传 入 NaN 时 才 会 
返回 true。 值 得 注意 的 是 ， 在 最 后 一 个 示例 中 ， 我 们 实际 上 是 向 Number .isNaN 传 入 了 一 个 
NaN， 因 为 这 个 传 入 的 值 是 两 个 字符 串 相 除 的 结果 。 











Number .isNaN(123) 

// <- false， 整 型 数字 不 是 NaN 

Number .isNaN(Infinity) 

// <- false，Infinity 不 是 NaN 

Number .isNaN('a hundred') 

// <- false，'a hundred' 不 是 NaN 

Number .isNaN(NaN) 

// <- true，NaN 是 NaN 

Number .isNaN('a hundred' / 'two') 

// <- true，'a hundred' / 'two' 是 NaN，NaN 是 NaN 

















相反 ， 与 NaN 比较 前 ，isNaN 方法 就 对 传人 的 值 进行 了 类 型 转换 。 结 果 显 而 易 见 ， 返 回 值 
是 不 同 的 。 在 以 下 示例 中 ， 因 为 isNaN 一 开始 就 将 value 转换 成 了 Number 类 型 ， 所 以 与 使 
用 Number .isNaN 的 结果 就 大 不 一 样 了 。 














isNaN('a hundred ' ) 

// <- true， 因 为 Number('a hundred ' ) 值 为 NaN 
isNaN(new Date()) 

// <- false， 因 为 Number(new Date()) 使 用 Date#vaLueOf ， 
// 返回 值 是 一 个 Unix 时 间 截 


Number .isNaN 要 比 其 全 局 版 本 更 为 精确 ， 因 为 它 不 包含 类 型 转换 。 然 而 ， 一 些 场景 仍然 会 
使 Number.isNaN 变 成 烦恼 的 根源 。 


























首先 ，isNaN 在 比较 开始 前 就 进行 了 类 型 转换 ， 但 Number .isNaN 不 是 。 因 此 ，isNaN 和 
Number .isNaN 都 没有 回答 “这 个 值 难道 不 是 一 个 数字 吗 ” 这 个 问题 ， 而 是 回答 了 “一 个 值 
或 一 个 数字 是 否 为 NaN” 的 问题 


在 大 多 数 使 用 场景 中 ， 你 实际 上 是 想 知 道 一 个 值 是 否 可 以 被 视 为 数字 ， 即 typeof NaN === 
number ， 或 者 说 这 个 值 是 不 是 数字 。 以 下 代码 示例 中 的 isNumber 函数 正好 回答 了 这 个 问 
题 。 注 意 ， 这 个 函数 同时 使 用 了 isNaN 和 Number.isNaN 来 进行 类 型 检查 。typeof 可 以 区 分 
出 一 个 值 是 否 为 数字 类 型 ， 除 非 这 个 值 是 NaN， 因 此 我 们 过 滤 掉 了 那些 假 阳 性 的 结果 。 



























































function isNumber(value) { 





return typeof vaLue === 'Nnumber' && !Number.isNaN(value) 
} 
你 可 以 用 以 上 方法 来 区 分 一 个 值 是 否 为 数字 ， 以 下 示例 展现 了 isNumber 是 如 何 运 作 的 。 
isNumber(1) 
// <- true 
isNumber (Infinity) 
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// <- true 

isNumber (NaN) 

// <- false 
isNumber('two') 

// <- false 
isNumber (new Date()) 
// <- false 


有 这 么 一 个 函数 ， 它 已 经 存在 于 这 门 语言 中 ， 并 且 从 某 些 程度 来 说 有 点 像 我 们 定义 的 isNumber 
函数 ， 它 就 是 isFinite。 





7.1.3 Number.isFinite 


isFinite 少 有 人 知 ， 但 其 实 早 就 存在 于 ES3 中 。 它 返回 一 个 布尔 值 以 表明 提供 的 value 是 
否 不 匹配 Infinity、-Infinity 和 NaN 中 的 任何 一 个 。 


























isFinite 方法 会 通过 Number(value) 对 值 进行 强制 转换 ， 而 Number .isFinite 则 不 会 。 这 意 
味 着 那些 可 以 强制 转换 成 非 NaN 数字 的 值 将 被 LsNumber 视 为 有 限 数 字 ， 即 使 它们 不 是 显 式 
数字 。 

以 下 是 一 些 使 用 全 局 isFinite 函数 的 示例 。 


isFinite(NaN) 

// <- false 

isFinite(Infinity) 

// <- false 

isFinite(-Infinity) 

// <- false 

isFinite(null) 

// <- true， 因 为 Number(null) 值 为 0 
isFinite(-13) 
// <- true， 因 为 Number(-13) 值 为 -13 
isFinite('10') 
// <- true， 因 为 Number('19' ) 值 为 10 


使 用 Number .isFinite 更 安全 ， 因 为 它 不 会 出 现 意 想不到 的 转换 。 要 想 将 value 强制 转换 
为 数字 表示 形式 ， 你 可 以 随时 使 用 Number .isFinite(Number(value))。 分 离 转 换 与 计算 会 
使 代码 更 明确 。 








以 下 是 使 用 Number .isFinite 方法 的 儿 个 示例 。 


Number .isFinite(NaN) 

// <- false 

Number .isFinite(Infinity) 

// <- false 

Number .isFinite(-Infinity) 

// <- false 

Number .isFinite(null) 

// <- false， 因 为 null 不 是 一 个 数字 
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Number .isFinite(-13) 

// <- true 

Number .isFinite('10') 

// <- false， 因 为 '10' 不 是 一 个 数字 








为 Number .isFinite 创建 ponyfill 将 会 为 非 数 字 的 值 返 回 false， 这 可 以 有 效 地 关闭 类 型 转 
换 功 能 ， 然 后 对 输入 值 调用 isFinite。 
function numberIsFinite(value) { 


return typeof vaLue === 'Nnumber' && isFinite(value) 


} 


7.1.4 Number.parseInt 
Number .parseInt 方法 的 工作 原理 与 parseInt 相同 ， 事实 上 ， 它 们 就 是 相同 的 。 




















console.log(Number .parseInt === parseInt) 
// <- true 








parseInt 国 数 支持 字符 串 中 的 十 六 进 制 字面 量 符号 ， 甚 至 没有 必要 指定 radix: 基于 6x 前 
级 ，parseInt 可 以 推断 该 数字 为 十 六 进 制 。 











parseInt('0xf00 ' ) 

// <- 3840 
parseInt('0xf00' ，16) 
// <- 3840 





如 果 提 供 了 另 一 个 radix， 则 parseInt 会 在 第 一 个 非 数字 字符 后 跳出 





o 


parseInt('0xf00' ，10) 

// <- 0 

parseInt('5xf00' ，10) 

// <- 5， 可 见 这 里 没有 特殊 处 理 
虽然 parseInt 接受 十 六 进 制 字 面 量 符号 字符 串 形 式 的 输入 ， 但 其 接口 在 ES6 中 并 没有 改 
变 。 因 此 ， 二 进 制 和 八进制 字面 量 符号 字符 串 将 不 会 这 样 解析 。ES6 引入 了 一 种 新 的 不 一 
致 性 : parseInt 可 以 解析 9x， 但 不 能 解析 9b 和 9%o。 











parseInt('0b011') 

// <- 0 
parseInt('0b011' ，2) 
// <- 0 
parseInt('00100') 

// <- 0 
parseInt('00100', 8) 
// <- 0 








要 想 用 parseInt 来 解析 这 些 字面 量 ， 你 可 以 在 parseInt 前 先 删 除 它们 的 前 级 。 你 还 需要 
指定 相应 二 进 制 或 八进制 的 radix 值 。 
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parseInt('0b011' .sSLice(2)，2) 
// <- 3 
parseInt('0o110' .sSLice(2)，8) 
// <- 72 





相反 ，Number 国 数 完全 可 以 将 这 些 字符 串 转 换 为 正确 的 数字 。 
Number('0b011' ) 
// <- 3 
Number('00110') 
// <- 72 


7.1.5 Number .parseFloat 
与 parseInt 一 样 ，parseFloat 没有 做 任何 修改 就 添加 到 Number 了 。 





console.log(Number .parseFLoat === parseFLoat) 
// <- true 


好 在 parseFtoat 不 会 对 十 六 进 制 字符 串 进 行 任何 特殊 转换 ， 这 意味 着 Nunber .parseFloat 
不 太 可 能 引起 混淆 。 


出 于 完整 性 的 目的 ，parseFloat 函数 才 添 加 到 Number 中 。 在 未 来 的 语言 版 本 中 ， 全 局 命名 
空间 污染 将 会 减少 。 用 于 特定 目的 时 ， 函 数 会 添加 到 相关 的 内 置 中 ， 而 不 是 全 局 。 








7.1.6 Number.isInteger 


Number .isInteger 是 ES6 中 的 一 种 新 方法 ， 它 以 前 不 能 用 作 全 局 函数 。 如 果 提 供 的 value 
是 没有 小 数 部 分 的 有 限 数字 ， 则 isInteger 方法 返回 true。 





console.log(Number .isInteger(Infinity)) // <- false 
console.log(Number .isInteger(-Infinity)) // <- false 
console.log(Number .isInteger(NaN)) // <- false 
console.log(Number .isInteger(nuLL)) // <- false 
console.log(Number .isInteger(0)) // <- true 
console.log(Number .isInteger(-10)) // <- true 
console.log(Number .isInteger(10.3)) // <- false 


你 可 能 想 将 以 下 代码 段 当 作 Number .isInteger 的 ponyfill 来 使 用 。 模 数 运算 返回 的 是 除 以 
相同 操作 数 的 余数 。 如 果 除 以 一 ， 我 们 可 以 得 到 小 数 部 分 。 如 果 结 果 为 6， 那 就 意味 着 这 


个 数字 是 一 个 整数 。 




















function numberIsInteger(vaLue) { 
return Number.isFinite(value) && value % 1 === 0 


} 
接 下 来 我 们 将 深入 探讨 浮 点 运算 ， 其 中 有 很 多 有 趣 的 案例 。 
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7.1.7 Number .EPSILON 
EPSILON 属性 是 Number 内 置 中 新 添加 的 常数 值 。 以 下 代码 段 展 示 了 它 的 值 。 
































Number .EPSILON 

// <- 2.220446049250313e-16 
Number .EPSILON. toFixed(20) 

// <- '0.00000000000000022204" 


我 们 来 看 看 浮 点 运算 的 典型 示例 。 


0.1 + 0.2 

// <- 0.30000000000000004 
0.1 + 0.2 === 0.3 

// <- false 


这 个 操作 的 误差 是 多 少 ? 我 们 可 以 移动 操作 数 并 找 出 答案 。 


0.1+0.2 - 0.3 

// <- 5.551115123125783e-17 
5.551115123125783e-17.toFixed(20) 
// <- '0.00000000000000005551' 


可 以 用 Number .EPSILON 来 判断 这 个 误差 是 否 小 到 可 以 忽略 不 计 ;，Number .EPSILON 表示 浮 点 
运算 伟人 操作 的 安全 误差 范 











| 





o 


5.551115123125783e-17 < Number .EPSILON 
// <- true 


以 下 代码 可 以 用 来 确定 浮 点 运算 的 结果 是 否 在 预期 的 误差 范围 内 。 我 们 使 用 Math.abs， 这 
样 Left 和 right 的 位 置 就 无 关 紧 要 了 。 换 名 话说 ，wtthinMargtinOfError(Left， right) 会 
产生 与 withinMargin0fError(right，left) 相同 的 结果 。 

function withinMarginOfError(left, right) { 


return Math.abs(left - right) < Number .EPSILON 
} 





以 下 代码 段 展 示 了 withinMargin0fError 的 实际 使 用 情况 。 


withinMarginOfError(0.1 + 0.2, 0.3) 
// <- true 
withinMarginOfError(0.2 + 0.2, 0.3) 
// <- false 








在 使 用 浮 点 表示 法 时 ， 并 不 是 每 个 整数 都 可 以 被 精确 表示 。 





7.1.8 Number .MAX_SAFE_INTEGER 和 Number .MIN_SAFE_INTEGER 
Number .MAX_SAFE_INTEGER 是 JavaScript 中 可 以 安全 且 精 确 表示 的 最 大 整数 ， 或 者 是 IEEE 
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754 标准 .规定 的 能 用 浮 点 表示 整数 的 任何 语言 可 以 表示 的 最 大 整数 。 以 下 代码 展示 了 


Number .MAX_SAFE_INTEGER 有 多 大 。 


Number .MAX_SAFE_INTEGER === Math.pow(2，53) - 1 
// <- true 

Number .MAX_SAFE_INTEGER === 9007199254740991 

// <- true 





正如 你 所 预料 的 那样 ， 最 大 值 也 有 相反 的 常数 





应 的 负数 。 
Number .MIN_SAFE_INTEGER === -Number .MAX_SAFE_INTEGER 
// <- true 
Number .MIN_SAFE_INTEGER === -9007199254740991 
// <- true 








浮 点 运算 在 [MIN_SAFE_INTEGER，MAX_SAFE_INTEGER] 范围 之 外 变 得 不 可 靠 。1 === 














结果 是 false， 因 为 它们 是 不 同 的 值 。 但 如 果 我 们 给 每 个 数 加 上 Number .MAX_SAFE_ 


那么 1 === 2 似乎 是 正确 的 。 


1. ===” 2 

// <- false 

Number .MAX_SAFE_INTEGER + 1 === Number .MAX_SAFE_INTEGER + 2 
// <- true 

Number .MIN_SAFE_INTEGER - 1 === Number .MIN_SAFE_INTEGER - 2 
// <- true 


在 检查 一 个 整数 是 否 安全 时 ，Number .isSafeInteger 国 数 已 经 被 添加 到 该 语言 中 。 


7.1.9 Number .isSafeInteger 
对 于 [MIN_SAFE_INTEGER， MAX_SAFE_INTEGER] 范围 内 的 任何 整数 ， 此 方法 都 会 返回 

















最 小 值 ， 即 Number .MAX_SAFE_INTEGER 对 


2 语句 的 
INTEGER ， 


true。 与 


ES6 引入 的 其 他 Number 方法 一 样 ， 该 方法 不 涉及 任何 类 型 的 强制 转换 。 输 入 必须 是 整 型 数 
字 ， 并 且 上 述 范围 才能 使 此 方法 返回 true。 以 下 代码 展示 了 一 组 全 面 的 输入 和 输出 集 。 





Number .isSafeInteger('one') // <- false 

Number .isSafeInteger('0') // <- false 

Number .isSafeInteger(nuLL) // <- false 

Number .isSafeInteger(NaN) // <- false 

Number .isSafeInteger(Infinity) // <- false 

Number .isSafeInteger(-Infinity) // <- false 

Number .isSafeInteger(Number .MIN_SAFE_INTEGER - 1) // <- false 
Number .isSafeInteger (Number .MIN_SAFE_INTEGER) // <- true 
Number .isSafeInteger(1) // <- true 

Number .isSafeInteger(1.2) // <- false 

Number .isSafeInteger (Number .MAX_SAFE_INTEGER) // <- true 
Number .isSafeInteger (Number .MAX_SAFE_INTEGER + 1) // <- false 














注 1: IEEE 754 是 浮 点 标准 。 








大 
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要 想 验 证 一 个 操作 的 结果 是 否 在 界限 内 ， 我 们 不 仅 要 验证 结果 ， 还 要 验证 这 两 个 操作 数 ?。 
操作 数 之 一 或 者 二 者 都 可 能 超出 范围 ， 而 结果 在 范围 内 但 并 不 正确 。 同 样 ， 即 使 两 个 操作 
数 在 范围 内 ， 结 果 也 可 能 超出 范围 。 检 查 所 有 的 left、right 和 Left op right 的 结果 是 






































很 有 必要 的 ， 这 样 我 们 才 可 以 信任 该 结果 。 
在 以 下 示例 中 ， 两 个 操作 数 都 在 范围 内 ， 但 结果 不 正确 。 





ut 




















Number .isSafeInteger(9007199254740000) 

// <- true 

Number .isSafeInteger(993) 

// <- true 

Number .isSafeInteger(9007199254740000 + 993) 

// <- false 

9007199254740000 + 993 

// <- 9007199254740992, should be 9007199254740993 




















即使 操作 数 超出 范围 ， 某 些 操 作 和 数字 还 是 可 能 会 返回 正确 的 结果 ， 如 下 所 示 。 然 而 ， 不 


能 确保 正确 结果 的 事实 意味 着 这 此 操作 是 不 可 信 的 . 


9007199254740000 + 994 
// <- 9007199254740994 








以 下 示例 中 的 其 中 一 个 操作 数 超出 了 范围 ， 因 此 我 们 不 能 相信 结果 是 准确 的 。 











Number .isSafeInteger(9007199254740993) 

// <- false 

Number .isSafeInteger(990) 

// <- true 

Number .isSafeInteger(9007199254740993 + 990) 
// <- false 

9007199254740993 + 990 

// <- 9007199254741982， 应 为 9907199254741983 

















一 个 示例 中 的 减法 会 产生 一 个 范围 内 的 结果 ， 但 这 个 结果 也 是 不 准确 的 。 


Number .isSafeInteger(9007199254740993) 

// <- false 

Number .isSafeInteger(990) 

// <- true 

Number .isSafeInteger(9007199254740993 - 990) 
// <- true 

9007199254740993 - 990 

// <- 9007199254740002， 应 为 9907199254740003 




















如 有 果 两 个 操作 数 都 超出 了 范围 ， 即 使 结果 不 正确 ， 输 出 也 可 能 会 在 安全 范围 内 。 








ut 








Number .isSafeInteger(9007199254740995) 
// <- false 











注 2: Axel Rauschmayer 博士 在 New Numpber and Math Features in ES6 一 文中 指出 了 这 一 点 。 
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Number .isSafeInteger(9007199254740993) 


// <- false 

Number .isSafeInteger(9007199254740995 - 9007199254740993) 
// <- true 

9007199254740995 - 9007199254740993 

// 二 4， 应 为 2 


我 们 得 出 的 结论 是 ， 判 断 操作 是 否 产生 正确 输出 的 唯一 安全 方法 是 使 用 如 下 所 示 的 效用 国 
数 。 如 果 无 法 确定 其 中 的 一 个 或 两 个 操作 数 是 否 在 范围 内 ， 那 么 结果 可 能 不 准确 ， 这 是 一 
个 问题 。 在 这 些 情 况 下 ， 最 好 能 够 抛 出 异常 ， 并 纠正 错误 ， 但 这 是 针对 你 的 程序 。 实 际 
上 ， 抓 住 这 些 难以 处 理 的 错误 才 是 重要 的 部 分 。 









































function safeOp(result, ...operands) { 
const values = [result, ...operands] 
if (!vaLues.every(Number .isSafeInteger)) { 
throw new RangeError('Operation cannot be trusted!') 
} 


return result 


} 
你 可 以 使 用 safeop 来 确保 所 有 操作 数 (包括 resutt) 都 在 安全 范围 内 。 


safe0p(9007199254740000 + 993，9007199254740000，993) 
// <- RangeError: Operation cannot be trusted! 
safe0p(9007199254740993 + 990,，9007199254740993，990) 
// <- RangeError: Operation cannot be trusted! 
safe0p(9007199254740993 - 990，9007199254740993，990) 
// <- RangeError: Operation cannot be trusted! 
safe0p( 

9007199254740993 - 9007199254740995 ， 

9007199254740993 ， 

9007199254740995 
) 


// <- RangeError: Operation cannot be trusted! 

safe0p(1 + 2, 1, 2) 

// <- 3 
这 就 是 Number 的 所 有 情况 ， 但 我 们 还 没有 完成 与 数学 相关 的 改进 。 接 下 来 我 们 将 注意 力 转 
向 Math 内 置 。 


7.2 Math 


ES6 为 Math 内 置 引入 了 很 多 新 的 静态 方法 。 其 中 的 一 些 方法 是 专门 为 使 C 语言 更 容易 编 
译 成 JavaScript 而 设计 的 ， 你 很 少 需要 将 它们 用 于 日 常 的 JavaScript 应 用 开发 。 其 他 方法 是 
对 现 有 的 舍 入 、 取 和 究 和 三 角 函 数 API 接口 的 补充 。 




















我 们 开始 吧 。 








7.2.1 Math.sign 


许多 语言 中 都 有 一 个 数学 的 sign 方法 ， 它 返回 一 个 矢量 (-1、0 或 1) 来 表示 所 提供 的 输 
入 的 符号 。JavaScript 中 的 Math.sign 方法 也 是 如 此 。 但 是 ，JavaScript 中 的 此 方法 还 有 两 
个 可 能 的 返回 值 : -0 和 NaN。 查 看 以 下 代码 段 中 的 示例 。 


Math.sign(1) // < 

Math.sign(0) // <- 0 

Math.sign(-0) // <- -0 

Math.sign(-30) // <- -1 

Math.sign(NaN) // <- NaN 

Math.sign('one') // <- NaN， 因 为 Number('one') 值 为 NaN 
Math.sign('0') // <- 9， 因为 Number('0') 值 为 0 
Math.sign('7') // <- 1， 因 为 Number('7') 值 为 7 


注意 Math.sign 是 如 何 将 其 输入 转换 为 数字 值 的 。 虽 然 引 入 Number 内 置 的 方法 不 会 通过 
Number(value) 进行 类 型 转换 ， 但 添加 到 Math 中 的 大 多 数 方法 是 具有 这 个 特性 的 ， 正 如 我 
们 将 看 到 的 那样 

















o 


7.2.2 Math.trunc 


JavaScript 中 已 经 有 Math.fLoor 和 Math.ceil 方法 ， 我 们 可 以 用 它们 分 别 向 下 或 向 上 取 整 。 
现在 我 们 还 有 Math.trunc 作为 替代 方案 ， 该 方法 会 舍弃 小 数 部 分 但 不 进行 售 人 。 这 里 输入 
会 被 Number(value) 强制 转换 为 数值 。 


Math.trunc(12.34567) // <- 12 

Math.trunc(-13.58) // <- -13 

Math.trunc(-0.1234) // <- -0 

Math.trunc(NaN) // <- NaN 

Math.trunc('one') // <- NaN， 因 为 Number('one') 值 为 NaN 
Math.trunc('123.456') // <- 123，Number('123.456') 值 为 123.456 











为 Math.trunc 创建 一 个 简单 的 ponyfill 来 检查 输入 值 是 否 大 于 零 ， 并 应 用 Math.floor 或 
Math.ceil 方法 ， 如 下 所 示 。 


function mathTrunc(value) { 
return vaLue > 0 ? Math.fLoor(vaLue) : Math.ceil(value) 


} 


7.2.3 Math.cbrt 


Math.cbrt 方法 是 “立方 根 ” 的 简称 ， 类 似 于 Math.sqrt 是 “平方 根 ”的 缩写 ， 使 用 方法 如 
下 所 示 。 





Math.cbrt(-1) // <- -1 

Math.cbrt(3) // <- 1.4422495703074083 
Math.cbrt(8) // <- 2 

Math.cbrt(27) // <- 3 





ES6 中 内 置 API 的 改进 | 171 





注意 ， 此 方法 也 会 将 非 数 值 强制 转换 为 数字 。 





Math.cbrt('8') // <- 2， 因 为 Number('8') 值 为 8 
Math.cbrt('one') // <- NaN， 因 为 Number('one') 值 为 NaN 


我 们 继续 。 























7.2.4 Math.expml 


这 个 操作 用 于 计算 e 的 value 次 究 的 结果 减 1。 在 JavaScript 中 ， 常 量 e 被 定义 为 Math.E。 
以 下 代码 段 中 的 函数 大 致 相当 于 Math.expm1。 

















function expmi(value) { 
return Math.pow(Math.E, value) - 1 
} 


e^value^ 操作 也 可 以 表示 为 Math.exp(value)。 


function expm1(vaLue) { 
return Math.exp(value) - 1 


} 


注意 ，Math.expm1 比 单纯 的 Math.exp(vatue) - 1 计算 具有 更 高 的 精确 度 ， 应 该 作为 首选 
来 使 用 。 





expm1(1e-20) 

// <- 8 

Math .expm1(1e-20) 

// <- 1e-20 

expm1(1e-10) 

// <- 1.000000082740371e-10 
Math .expm1(1e-10) 

// <- 1.00000000005e-10 


Math .expml 的 逆 国 数 是 Math.Loglp。 


7.2.5 Math.logip 


这 是 value+1 的 自然 对 数 ln(value + 1) 一 一 也 是 Math.expml 的 逆 函 数 。 在 JavaScript 
中 ,一 个 数字 的 自然 对 数 可 以 用 Math.1log 表示 。 








function logip(value) { 
return Math.log(value + 1) 


} 


与 Math.expm1 一 样 ，Math.logip 方法 比 手动 执行 Math .log(value + 1) 操作 更 精确 。 


log1ip(1.00000000005e-10) 
// <- 1.000000082690371e-10 
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Math.Loglp(1.00000000005e-10) 

// <- 1e-10， 就 是 Math .expm1(1e-10) 的 逆 运 算 
7.2.6 Math.log10 
以 10 为 底 的 log10(value) 的 对 数 。 


Math .log10(1000) 
// <- 3 


你 可 以 使 用 Math.LN10 常量 为 Math.Log16 创建 ponyfill。 
function mathLog10(vaLue) { 
return Math.log(x) / Math.LN10 
} 


接 下 来 就 是 Math.1log2。 


7.2.7 Math.log2 
以 2 为 底 的 log2(value) 的 对 数 。 


Math .log2(1024) 
// <- 10 





你 可 以 使 用 Math.LN2 常量 为 Math.1og2 创建 ponyfill。 


function mathLog2(value) { 
return Math.log(x) / Math.LN2 
} 


注意 ，ponyfill 版 本 不 会 像 Math.1og2 那样 精确 ， 如 下 所 示 。 





Math.Log2(1 << 29) // 原生 的 实现 方式 
// <- 29 

mathLog2(1 << 29) // ponyfill 的 实现 方式 
// <- 29.000000000000004 





<< 运算 符 执行 “ 按 位 左 移 。 在 此 操作 中 ， 按 照 操 作 的 右边 显示 的 ， 二 进 制 表示 的 字 节 会 
从 其 左边 的 数字 向 左 移 动 指定 的 位 数 。 以 下 两 个 示例 展示 了 如 何 使 用 7.1.1 市 介绍 的 二 进 
制 文字 符号 进行 移 位 。 




















0b00000001 // 1 
0b00000001 << 2 // 左 移 ?位 
0b00000100 // 4 


0b00001101 // 1 
0b00001161 << 4 // 左 移 4 位 
0b11010000 // 208 
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7.2.8 三 角 函 数 
ES6 中 的 Math 对 象 添加 了 三 角 函 数 : 





。 Math.sinh(value) 返回 value 的 双 曲 正弦 人 
。 Math.cosh(value) 返回 value 的 双 曲 余弦 人 
。 Math.tanh(value) 返回 value 的 双 曲 正切 1 
。 Math.asinh(value) 返回 value 的 反 曲 正弦 值 ; 
。 Math.acosh(value) 返回 value 的 反 曲 余 弱 值 ; 
。 Math.atanh(value) 返回 value 的 反 曲 正切 值 。 


TI 








TI 

















IT 








7.2.9 Math.hypot 
我 们 用 Math.hypot 返回 每 个 参数 的 平方 和 的 平方 根 。 








Math.hypot(1, 2, 3) 
// <- 3.741657386773941，(1*1 + 2*2 + 3*3) 的 平方 根 








通过 手动 执行 这 些 操作 ， 我 们 可 以 为 Math.hypot 创建 ponyfill。 我 们 可 以 用 Math.sqrt 来 计 
算 平方 根 ， 并 结合 Array#reduce 与 扩展 运算 对 平方 进行 求 和 。 
function mathHypot(...values) { 
const accumulateSquares (total, value) => 
total + value * value 
const squares = values.reduce(accumulateSquares, 0) 


return Math.sqrt(squares) 


} 


令 人 惊讶 的 是 ， 在 这 个 特定 用 例 下 ， 和 手动 创建 的 函数 竟然 比 原生 函数 更 精确 。 在 以 下 代码 
示例 中 ， 我 们 可 以 看 到 手动 创建 的 hypot 函数 提供 了 多 一 位 的 小 数 精 确 度 。 
Math.hypot(1，2，3) // 原生 的 实现 方式 
// <- 3.741657386773941 


mathHypot(1，2，3) // ponyfil1l 的 实现 方式 
// <- 3.7416573867739413 


7.2.10” 按 位 计算 助手 
7.2 节 的 开头 说 过 ， 一 些 Math 的 新 方法 是 专门 为 将 C 语言 更 轻松 地 编译 为 JavaScript 而 设 
计 的 。 它 们 是 我 们 将 要 介绍 的 最 后 3 种 方法 ， 用 于 处 理 32 位 数字 。 


1. Math .cLz32 
此 方法 的 名 称 是 “计算 二 进 制 表示 的 32 位 数字 中 的 前 导 零 位 ”的 首 字 母 缩 写 词 。 记 住 ， 











注 3: 你 可 以 阅读 作者 的 Fun with Native 4rrays 一 文 来 深入 了 解 Array 的 方法 。 





-A 


174 | 第 7 章 


<< 运算 符 执 行 “ 按 位 左 位 移 "， 我 们 来 看 看 以 下 代码 段 中 的 Math.ct 


Math.clz32(0) // <- 32 
Math.clz32(1) // <- 31 
Math.cLz32(1 << 1) // <- 30 
Math.clz32(1 << 2) // <- 29 
Math.clz32(1 << 29) // <- 2 
Math.clz32(1 << 31) // <- 0 


2. Math.imul 
返回 类 C 语言 中 的 32 位 乘法 的 结果 。 


3. Math.fround 
将 value 伟人 到 最 接近 的 32 位 浮 点 型 表示 的 数字 。 


7.3 字符 串 和 Unicode 





z32 的 输入 和 输出 。 


你 可 能 会 想起 2.5 节 中 介绍 过 的 模板 字面 量 ， 以 及 如 何 使 用 它们 来 混合 字符 串 和 变量 ， 或 





使 用 任何 有 效 的 JavaScript 表达 式 ， 以 产生 字符 串 输出 。 





function greet(name) { 
return ‘Hello, ${ name }!°. 


greet('Gandalf') 
// <- 'Hello, Gandalf!' 


在 ES6 中 ， 除 了 模板 字面 量 语法 外 ， 字 符 串 还 有 许多 新 的 方法 。 这 
串 操作 方法 和 与 Unicode 相关 的 方法 。 我 们 从 前 者 开始 。 





7.3.1 String#startsWith 
在 ES6 问世 前 ， 无 论 何 时 想 要 检查 一 个 字符 串 是 否 以 其 他 字符 














些 方法 可 以 分 类 为 字符 





开头 ， 我 们 都 会 使 用 


String#index0f 方法 ， 如 下 所 示 。 结 果 9 意味 着 字符 串 以 提供 的 值 开始 。 


'hello gary'.indexOf('gary') 

// <- 6 

'hello gary'.indexOf('hello') 
// <- 0 

'hello gary'.indexOf('stephan') 
// <- -1 


要 想 检 查 一 个 字符 串 是 否 以 另 一 个 字符 串 开 始 ， 你 可 以 用 String 拆 
找到 的 索引 值 是 否 为 字符 串 开 头 的 6 索引 值 。 




















'hello gary' .indexof('gary') === 0 
// <- false 
'hello gary' .indexof('heLLo' ) === 0 


ndexof 比较 它们 并 检查 





ES6 中 
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// <- true 
'hello gary'.indexOf('stephan') === 0 
// <- false 


现在 你 可 以 使 用 String#startsWith 方法 ， 以 避免 因 检 查 索 引 是 否 为 8 而 带 来 不 必要 的 复 





'hello gary'.startsWith('gary') 

// <- false 

'hello gary'.startsWith('hello') 
// <- true 

'hello gary'.startsWith('stephan') 
// <- false 





为 了 确定 一 个 字符 串 是 否 包 含 一 个 从 特定 索引 值 开 始 的 字符 串 ， 我 们 可 以 用 
String#index0f 先 获取 该 字符 串 的 一 部 分 。 











'hello gary'.slice(6).indexOof('gary') === 0 

// <- true 
我 们 不 能 简单 地 检查 索引 是 否 为 6， 如 果 在 达到 索引 值 6 前 找到 查询 值 ， 那 么 会 产生 
假 阴 性 。 以 下 示例 表明 ， 即 使 要 查询 的 'ell' 字符 串 确 实处 于 索引 值 6， 但 是 只 比较 
String#index0f 的 结果 和 6 并 不 足以 获得 正确 的 结果 。 











'hello ell'.indexOof('ell') === 6 
// <- false， 因 为 结果 是 1 


我 们 可 以 使 用 indexof 中 的 startIndex 参数 来 解决 这 个 问题 ， 无 须 依赖 于 String#slice。 
注意 ， 这 里 我 们 仍然 与 6 进行 比较 ， 因 为 字符 串 在 开始 的 操作 中 未 被 切 分 。 














'hello eLL' .indexOf('eLL' ，6) === 6 

// <- true 
对 于 正在 搜索 的 内 容 ， 与 其 关注 所 有 这 些 字符 串 实现 搜索 的 细节 并 编写 如 何 搜索 的 代码 ， 
不 妨 使 用 String#startswith 来 传递 可 选 startIndex 参数 。 


'hello ell'.startsWith('ell', 6) 
// <- true 


7.3.2 String#endsWith 


这 个 方法 与 String#startsWith 是 镜像 的 ， 正 如 String#lastIndex0f 是 String#index0f 的 
镜像 。 它 告诉 我 们 一 个 字符 串 是 否 以 另 一 个 字符 串 结尾 。 


'hello gary' .endsWith('gary') 
// <- true 
'hello gary' .endsWith('hello') 
// <- false 





A 
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与 String#startswith 相反 ， 此 方法 有 一 个 索引 值 ， 用 于 指示 查找 应 该 结束 的 位 置 ， 而 不 





是 它 应 该 开始 的 位 置 。 它 默认 为 字符 串 的 长 度 。 


'hello gary' .endsWith('gary', 10) 
// <- true 
'hello gary' .endsWith('gary', 9) 
// <- false， 本 例 实际 上 以 gar 结 
'hello gary' .endsWith('hell', 4) 
// <- true 





(因为 第 9 位 是 rc， 而 非 y) 





ol 


String#includes 是 可 以 简化 String#index0f 特定 用 例 的 最 后 一 种 方法 。 


7.3.3 String#includes 


我 们 可 以 用 String#includes 来 确定 一 个 字符 串 是 否 包含 另 一 个 字符 串 ， 如 所 示 。 


'hello gary'.includes('hell') 
// <- true 

'hello gary'.includes('ga') 
// <- true 

'hello gary'.includes('rye') 
// <- false 

















这 与 ES5 用 例 中 的 String#index0f 测试 的 结果 -1 是 等 价 的 ， 用 于 检查 要 搜索 的 字符 串 是 


否 在 任何 位 置 被 找到 ， 如 下 所 示 。 





'hello gary' .indexof('ga') !== -1 
// <- true 
'hello gary' .indexof('rye') !== -1 
// <- false 





你 还 可 以 为 String#includes 提供 索引 值 ， 搜 索 将 从 该 索引 值 开始 。 











'hello gary'.includes('ga', 4) 
// <- true 
'hello gary'.includes('ga', 7) 
// <- false 


我 们 来 看 看 不 止 是 String#indexof 替代 方案 的 一 些 方法 。 


7.3.4 String#repeat 
这 种 方便 的 方法 允许 你 将 一 个 字符 串 重复 count 次 。 


'ha' .repeat(1) 


// <- 'ha' 
'ha' .repeat(2) 
// <- 'haha' 


'ha' .repeat(5) 
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// <- 'hahahahaha' 
'ha' .repeat(0) 
// a 时 汗 


提供 的 count 应 该 是 一 个 非 负 的 有 限 数字 。 
'ha' .repeat(Infinity) 
// <- RangeError 


'ha' .repeat(-1) 
// <- RangeError 


小 数值 会 向 下 取 整 到 最 近 的 整数 。 


'ha' .repeat(3.9) 
// <- 'hahaha'， 疝 下 取 整 为 3 


使 用 NaN 时 ，count 会 被 解析 为 9。 





'ha' .repeat(NaN) 
// RR 


非 数字 值 会 被 强制 转换 为 数字 。 

















'ha' .repeat('ha') 

// <- '， 因 为 Number('ha' ) 值 为 NaN 
'ha' .repeat('3') 

// <- 'hahaha' ， 因 为 Number('3') 值 为 3 


(-1，9) 范围 内 的 值 会 四 售 五 人 到 -6， 因 为 count 是 通过 ToInteger 方法 计算 的 ， 正 如 规范 
中 记录 的 那样 “。 规 范 中 的 这 一 步 要 求 count 使 用 以 下 代码 中 的 公式 进行 转换 。 

















function ToInteger(number) { 
return Math.floor(Math.abs(number)) * Math.sign(number) 


} 
ToInteger 函数 会 将 (-1，9) 范围 内 的 任何 值 转换 为 -9。 因 此 ， 向 String#repeat 方法 传递 
(-1，0) 范围 中 的 数字 将 被 视 为 零 ， 而 [-1，-Infinity) 范围 中 的 数字 将 导致 异常 ， 正 如 我 
们 前 面 所 了 解 的 那样 。 






































"na' .repeat(-0.1) 

// <-“， 因 为 向 下 取 整 为 -9 
"na' .repeat(-0.9) 
// <-“， 因 为 向 下 取 整 为 -9 

"na' .repeat(-0.9999) 

// <-“， 因 为 向 下 取 整 为 -9 

"na' .repeat(-1) 

// <- Uncaught RangeError: Invalid count value 


























注 4: 在 ECMAScript 6 规范 中 ，String#repeat 位 于 21.1.3.13 节 。 
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String#repeat 的 典型 用 例 可 能 是 填充 函数 。 以 下 代码 段 中 的 indent 函数 使 用 多 行 字 符 串 ， 
并 用 默认 的 两 个 空格 缩 进 每 行 所 需 的 spaces。 


function indent(text, spaces = 2) { 
return text 


.Split('\n') 
.map(line => ' '.repeat(spaces) + line) 
.join('\n') 

} 

indent( `a 

b 


< ，2) 
// <- ' a\n bn cc' 


7.3.5 字符 串 填 充 和 去 空白 

撰写 本 书 时 ，ES2017 发 布 了 两 种 新 的 字符 串 填充 方法 : String#padStart 和 String#padEnd。 
使 用 这 些 方法 后 ， 我 们 就 无 须 实 现 类 似 前 面 代码 段 中 的 indent 的 内 容 了 。 在 执行 字符 串 操 
作 时 ， 我 们 经 常 要 填充 一 个 字符 串 ， 以 便 与 我 们 想 要 的 格式 保持 一 致 。 在 格式 化 数字 、 货 
币 、HTML， 以 及 经 常 涉及 的 等 宽 文本 的 各 种 情况 中 ， 这 很 有 用 。 

使 用 padstart 时 ， 我 们 将 为 目标 字符 串 和 填充 字符 串 指定 所 需要 的 长 度 ， 默 认为 单个 空格 


字符 。 如 果 原 始 字 符 串 至 少 与 指定 长 度 相同 ， 那 么 padStart 会 导致 空 操 作 ， 并 返回 原始 字 
符 串 。 


在 以 下 示例 中 ， 被 填充 的 字符 串 的 期 望 长 度 为 5， 而 原始 字符 串 的 长 度 已 经 为 5， 因 此 返 
回 值 不 变 。 














'01.23' .padStart(5) 
// <- '01.23' 





以 下 示例 中 的 原始 字符 串 的 长 度 为 4， 因 此 padstart 在 字符 串 的 开头 添加 了 一 个 空格 ， 以 
便 长 度 达 到 期 望 值 5。 


'1.23' .padStart(5) 
// <- " 1.23"' 


以 下 示例 与 前 一 个 示例 类 似 ， 只 是 它 用 '0' 填充 ， 而 不 是 缺 省 值 ''。 


"1.23' .padStart(5， '0') 
// <- '01.23"' 


注意 ，padStart 将 持续 填充 字符 串 ， 直 到 达到 最 大 长 度 。 


"1.23' .padStart(7，'0 ') 
// <- '0001.23， 
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但 是 ， 如 果 填 充 字 符 串 过 长 ， 那 么 可 能 会 被 截断 。 提 供 的 长 度 是 填充 字符 串 的 最 大 长 度 ， 
除非 原始 字符 串 已 经 比 该 长 度 长 。 


"1.23' .padStart(7，'abcdef ') 
// <- 'abc1.23" 


padEnd 方法 具有 类 似 的 API， 但 它 是 在 原始 字符 串 的 末尾 添加 填充 ， 而 不 是 开头 。 以 下 代 
码 段 说 明了 这 种 差异 。 





'01.23' .padEnd(5) // <- '01.23' 
'1.23'.padEnd(5) // <- '1.23 ， 

'1.23' .padEnd(5, '0') // <- '1.230' 

'1.23' .padEnd(7, '0') // <- '1.23000' 
'1.23' .padEnd(7, 'abcdef') // <- '1.23abc’ 


撰写 本 书 时 ， 已 经 有 一 个 处 于 阶段 2 的 有 关 字 符 串 修整 的 提案 ， 其 中 包含 String#trimStart 
和 String#trimEnd 方法 。 我 们 可 以 用 trimstart 删除 字符 串 开头 的 任何 空格 ， 并 用 trimEnd 
删除 字符 串 未 尾 的 任何 空格 。 

















this should be left-aligned '.trimStart() 
// <- 'this should be left-aligned 

this should be right-aligned '.trimEnd() 
// <- this should be right-aligned' 


接 下 来 我 们 将 切换 协议 并 学 习 Unicode。 


7.3.6 Unicode 


JavaScript 字符 串 可 以 用 UTF-16 代码 单元 表示 "。 每 个 代码 单元 可 用 于 表示 [U+6600， 
UrFFFF] 范围 中 的 代码 点 ， 也 称 为 “基本 多 文 种 平面 ”(BMP，basic multilingual plane)。 你 
可 以 用 '\u3456' 语法 在 BMP 平面 中 表示 各 个 代码 点 ,也 可 以 用 \x69..\xff 符号 来 表示 
[U+0000，U+0255] 范围 内 的 代码 单元 。 举 例 来 说 ，'\xbb' 代表 '»' 的 U+66BB 代码 点 ， 你 也 
可 以 通过 String.fromCharCode(0xbb) 进行 验证 。 




















对 于 超出 UtFFFF 的 代码 点 ， 你 可 以 用 代理 对 表示 它们 ， 也 就 是 两 个 连续 的 代码 单元 。 例 
如 ， 马 表情 【等 ) 的 代码 点 可 以 用 '\ud83d\udcee' 的 连续 代码 单元 来 表示 。 在 ES6 中 ， 
你 也 可 以 用 '\u{1f46e}' 符号 表示 代码 点 〈 该 示例 也 是 马 表情 符号 ) 。 
































注意 ， 其 内 部 表示 没有 改变 ， 因 此 该 单个 代码 点 之 后 仍然 有 两 个 代码 单元 。 实 际 上 ， 
'\u{f1f40e}' .Length 的 值 为 2， 每 个 代码 单元 是 一 个 长 度 。 








以 下 代码 中 的 '\ud83d\udc6e\ud83d\udc71\u2764' 字符 串 是 由 好 几 个 表情 符号 构成 的 。 





注 5: 要 想 了 解 更 多 相关 信息 ， 可 以 参见 UCS-2, UCS-4, UTF-16 and UTF-32 (https://unicodebook.readthedocs.io/ 
unicode_encodings.html#ucs-2-ucs-4-utf-16-and-utf-32) 。 





-A 


180 | 第 7 章 


'\ud83d\udcOe\ud83d\udc71\y2764" 
//-<- ww 


虽然 该 字符 串 由 5 个 代码 单元 组 成 ， 但 我 们 知道 长 度 应 该 为 3， 因 为 只 有 3 个 表情 符号 。 





'\ud83d\udcOQe\ud83d\udc71\y2764' .Length 

// <- 5 

‘3 和 DD' .Length 
在 ES6 问世 前 ， 计 算 代 码 点 是 非常 辐 手 的 ， 因 为 该 语言 没有 在 Unicode 方面 做 出 任何 努 
力 ， 如 以 下 代码 段 中 的 object .keys 所 示 。 它 会 为 我 们 的 3 个 表情 符号 字符 串 返 回 5 个 键 ， 
因为 这 3 个 代码 点 总 共 使 用 了 5 个 代码 单元 。 














Object. ee of 

// <- [0 "3 ，'4"] 
如 果 现 在 思考 一 下 for 循环 ， 那 么 我 们 可 以 更 清楚 地 观察 到 这 是 一 个 问题 。 以 下 示例 想 从 
text 字符 串 中 提取 每 个 单独 的 表情 符号 ， 但 我 们 得 到 了 每 个 代码 单元 ， 而 不 是 它们 形成 的 
代码 点 。 

















const text ='9 
for (let i = 0; i < text.length; i++) { 
console.log (text[i]) 


// <- '\ud83d 

// <- '\udcQe' 

// <- '\ud83d 

// <- '\udc71' 

// <- '\u2764， 
} 


好 在 ES6 中 的 字符 串 遵循 迭代 协议 。 我 们 可 以 用 字符 串 迭 代 器 来 遍历 代码 点 ， 即 使 这 些 代 
码 点 是 由 代理 对 构成 的 。 





7.3.7 String.prototype[Symbol.iterator] 
考虑 到 代码 单元 循环 的 问题 ， 字 符 串 迭代 器 迭代 产生 的 是 代码 点 。 


for (const codePoint of'% DD' ,I 
console.log(codePoint) 


1/ <- 车 ' 
// <- '@' 
和 


正如 我 们 前 面 看 到 的 那样 ， 用 String#length 根据 代码 点 测量 字符 串 的 长 度 是 不 行 的 ， 因 
为 它 计 算 的 是 代码 单位 。 但 是 ， 我 们 可 以 用 迭 代 器 将 字符 串 拆 分 为 其 代码 点 ， 就 像 我 们 在 
for. .of 示例 中 所 做 的 那样 。 
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我 们 可 以 使 用 依赖 于 返 代 器 协议 的 扩展 运算 符 将 字符 串 拆 分 为 由 其 符合 的 代码 点 组 成 的 数 
组 ， 然 后 取出 该 数组 的 Length， 从 而 获得 正确 的 代码 点 数 ， 如 下 所 示 。 


[. .和 知 伟 人 鲍 '] .Length 
// <- 3 








记 住 ， 如 果 想 要 对 字符 串 长 度 进行 100% 的 精确 计算 ， 那 么 将 字符 串 拆 分 为 代码 点 是 不 够 
的 。 如 以 \u6365 代表 的 上 划 线 和 Unicode 代码 单元 的 组 合 ， 这 个 代码 单元 本 身 就 是 一 个 上 
划 线 ， 如 下 所 示 。 





'\u0305" 
I "7 


然而 ， 当 以 另 一 个 代码 单元 为 前 级 时 ， 它 们 被 组 合成 了 六 


世 
NS 








function overlined(text) { 
return '${ text }\u0305" 
} 


overlined('o') 

// <- "0 

'hello world'.split('').map(overlined).join('') 
// <- 'hetltlo wortd’ 


事实 证 明 ， 试 图 通过 计算 代码 点 来 计算 出 实际 长 度 是 不 够 的 ， 就 像 使 用 String#length 计 
算 代码 点 时 那样 ， 如 下 所 示 。 








'6' .Length 

// <- 2 

[...'0'].Llength 

// I 2， 应 为 1 
[...'heLLo worLd'] .Length 
1 
[...'hetltlo world'].length 
// <- 16， 应 为 11 


正如 Unicode 专家 Mathias Bynens 指出 的 那样 ， 通 过 代码 点 进行 分 割 是 不 够 的 。 与 前 面 示 
例 中 使 用 的 表情 等 代理 对 不 同 ， 字 符 串 选 代 器 不 考虑 其 他 字形 群集 "“。 运 气 不 好 的 情况 下 ， 
我 们 还 必须 使 用 正则 表达 式 或 实用 工具 库 来 计算 正确 的 字符 串 长 度 。 


7.3.8 ”有关 分 割 字 形 段 的 提案 


将 多 个 代码 点 合并 为 一 个 可 视 化 字形 变 得 越 来 越 普 遍 '。 一 个 新 的 提案 正在 进行 中 (目前 处 












































注 6: 建议 你 阅读 一 下 Mathias Bynens 的 JavaScript Has 4 Unicode Problem 一 文 。Mathias 在 文中 分 析 了 
JavaScript 与 Unicode 的 关系 。 
注 7: 表情 符号 使 字形 变 得 普遍 ， 它 有 时 使 用 由 4 个 代码 点 组 成 的 字形 。 多 个 代码 点 组 成 的 表情 符号 列表 参 


见 http://unicode.org/emoji/charts-beta/emoji-zwj-sequences.html。 
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于 阶段 2)， 该 提案 可 以 一 次 解决 迭代 字形 集群 的 问题 。 它 引入 了 一 个 Intl.Segmenter 内 
置 ， 用 于 将 字符 串 拆 分 为 可 和 迭代 的 序列 。 


要 想 使 用 Segmenter API， 首 先 需要 创建 一 个 IntL.Segmenter 实例 ， 以 指定 我 们 想 要 的 语 
言 环境 和 粒度 级 别 每 个 字形 、 单 词 、 句 子 或 行 。 分 段 器 实例 可 以 为 任何 给 定 的 字符 串 生 
成 迭代 器 ， 并 按 指定 的 granularity 方式 对 其 进行 分 割 。 注 意 ， 分 段 算法 可 能 因 语 言 环境 
而 异 ， 这 就 是 为 什么 它 是 API 的 一 部 分 。 














以 下 示例 定义 了 一 个 getGraphemes 函数 ， 该 函数 会 为 任何 给 定 的 语言 环境 和 文本 片段 生成 
一 组 字形 集群 。 





function getGraphemes(locale, text) { 
const segmenter = new Intl.Segmenter(locale, { 
granularity: 'grapheme’ 
}) 
Const sequence = segmenter .segment(text) 
const graphemes = [...sequence].map(item => item.segment) 
return graphemes 


getGraphemes('es', 'Esto esté bien bueno!') 


使 用 Segmenter (https://github.com/tc39/proposal-intl-segmenter) 提案 后 ， 我 们 就 不 会 在 分 
割 包含 表情 符号 或 其 他 组 合 代码 单元 的 字符 串 时 遇 到 任何 问题 了 。 

















我 们 来 看 看 ES6 中 引入 的 与 Unicode 相关 的 其 他 方法 。 


7.3.9 String#codePointAt 

我 们 可 以 用 String#codePointAt 来 获取 字符 串 中 给 定位 置 的 代码 点 的 数字 表示 。 注 意 ， 预 
期 的 起 始 位 置 是 代码 单元 的 索引 ， 而 不 是 代码 点 。 在 以 下 示例 中 ， 我 们 为 字符 串 中 的 每 个 
表情 符号 〈 知 鲁 鲍 ) 打印 了 代码 点 。 








const text = '\ud83d\udcOe\ud83d\udc71\y2764'" 
text.codePointAt(0) 

// <- 0x1f40e 

text.codePointAt(2) 

// <- Ox1f471 

text.codePointAt(4) 

// <- 0x2764 











识别 需要 提供 给 String#codePointAt 的 索引 可 能 会 很 麻烦 ， 这 就 是 为 什么 你 应 该 循环 
遍历 一 个 字符 串 迭 代 器 来 代替 你 自己 识别 它们 。 然 后 你 可 以 为 序列 中 的 每 个 代码 点 调 
用 .codePointAt(9)， 并 且 0 始终 是 正确 的 起 始 索 引 。 








const text = "\ud83d\udcoge\ud83dN\udc71\u2764 
for (const codepPoint of text) { 
consoLe.Log(codePoint .codePointAt(0)) 
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// <- Ox1if40e 

// <- Ox1f471 

// <- 0x2764 
} 


我 们 还 可 以 用 扩展 运算 符 和 Array#map 的 组 合 将 示例 简化 为 一 行 代码 。 


const text = '\ud83d\udcQe\ud83d\udc71\y2764" 
[...text].map(cp => cp.codePointAt(0)) 
// <- [Ox1if40e, Ox1f471, 0x2764] 


你 可 以 采用 base-16 表示 形式 来 替代 base-10 代码 点 ， 并 用 新 的 Unicode 代码 点 来 创建 一 个 
字符 串 ， 从 而 避免 使 用 \ufcodePoint} 语法 。 此 语法 允许 你 表示 超出 BMP 的 Unicode 代码 
点 。 也 就 是 说 ，[U+9909，U+FFFF] 范围 之 外 的 代码 点 通常 用 \u1234 语法 表示 。 








我 们 从 更 新 示例 开始 ， 以 打印 十 六 进 制版 本 的 代码 点 。 





const text = '\ud83d\udcQe\ud83d\udc71\y2764" 
[...text].map(cp => cp.codePointAt(0).toString(16)) 
// <- ['1f40e', '1f471', '2764'] 





我 们 可 以 将 这 些 base-16 的 值 包含 在 '\u{codePoint}' 中 ， 并 再 次 获得 表情 符号 值 。 











'\u{1if40e}' 

< 
'\u{1f471}" 
// <- ' 独 
'\u{2764}' 


// <- 全 


7.3.10 String.fromCodePoint 


该 方法 接收 一 个 数字 并 返回 一 个 代码 点 。 注 意 我 是 如 何在 刚 通 过 String#codePointAt 获得 
的 简洁 base-16 代码 点 中 使 用 前 级 0x 的 。 


String.fromCodePoint(0x1tf40e) 
// <- 知 
String.fromCodePoint(0x1f471) 
// <- “每 
String.fromCodepoint(0x2764) 


// <- 全 
你 也 可 以 使 用 普通 的 base-10 字面 量 ， 并 获得 相同 的 结果 。 

















String.fromCodepoint(128014) 
// <- 知 ' 
String.fromCodepoint(128113) 
// | ' 
String.fromCodepoint(10084) 


// <- '®@ 
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你 可 以 根据 需要 向 String.fromCodePoint 传人 尽 可 能 多 的 代码 点 。 


String.fromCodePoint(0x1f40e，0x1f471，0x2764) 

// <- Pm 
作为 徒劳 无 益 的 练习 ， 我 们 可 以 将 一 个 字符 串 映 射 到 代码 点 的 数字 表示 ， 然 后 返回 到 代码 
点 本 身 。 





const text ='\ud83d\udcOe\ud83d\udc71\y2764" 
[...text] 
.map(cp => cp.codePointAt(0)) 
.map(cp => String.fromCodePoint(cp)) 
.join('') 
//-<- wm 


反 转 字符 串 也 可 能 会 导致 问题 。 


7.3.11 Unicode-Aware 字 符 串 反 转 
思考 以 下 这 段 代码 。 








const text = "\ud83d\udcoge\ud83dNudc71\u2764 
text.split('').map(cp => cp.codePointAt(0)) 

// <- [55357, 56334, 55357, 56433, 10084] 
text.split('').reverse().map(cp => cp.codePointAt(0)) 
// <- [10084, 56433, 128014, 55357] 


问题 是 ， 当 我 们 不 得 不 为 了 正确 的 解决 方案 而 反 转 代码 点 时 ， 我 们 反 转 的 是 各 个 代码 单 
元 。 相 反 ， 如 果 用 扩展 运算 符 将 字符 串 按 其 代码 点 拆 分 ， 然 后 将 其 颠倒 ， 那 么 代码 点 将 被 
保留 ， 并 且 字 符 串 将 被 正确 地 直 倒 过 来 。 























const text ='\ud83d\udcOe\ud83d\udc71\y2764" 
[...text].reverse().join('') 


// <-- ' DEY 
这 样 一 来 ， 我 们 就 不 会 破坏 代码 点 了 。 再 次 强调 ， 这 不 适用 于 所 有 字形 集群 。 








[...'hello\u0305'].reverse().join('') 
// <- “olleh. 


我 们 将 要 介绍 的 与 Unicode 相关 的 最 后 一 个 方法 是 .normalize。 


7.3.12 String#normalize 


有 些 字符 串 的 代码 点 不 同 ， 可 看 上 去 却 是 完全 一 样 的 。 思 考 以 下 示例 ， 其 中 看 起 来 相同 的 
两 个 字符 串 在 任何 JavaScript 运行 时 都 不 会 被 视 为 相同 。 








'mafiana' === 'mafiana' 
// <- false 
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这 里 发 生 了 什么 ? 左边 的 版 本 有 一 个 站 ， 右 边 的 版 本 有 一 个 合成 的 字符 + ”和 一 个 n。 两 者 
在 视觉 上 相同 ， 但 如 果 查 看 代码 点 ， 我 们 就 会 发 现 它们 是 不 同 的 。 


[...'mafiana'].map(cp => cp.codePointAt(0).toString(16)) 
// <- ['6d', '61', 'f1', '61', '6e', '61'] 
[...'mafiana'].map(cp => cp.codePointAt(0).toString(16)) 
// <- ['6d', '61', '6e', '303', '61', '6e', '61'] 





就 像 "hetu5' 示例 那样 ， 虽 然 两 个 字符 串 的 长 度 看 上 去 都 是 6， 但 实际 上 第 二 个 字符 中 的 
长 度 是 7。 





[...'mafiana'].Llength 
// <- 6 
[...'mafiana'].Llength 


// <- 7 


如 果 用 String#normalize 对 第 二 个 版 本 进行 标准 化 ， 那 么 将 返回 与 第 一 个 版 本 中 相同 的 代 
码 点 。 





const normalized = 'mafiana' .normaLize() 
[...normalized].map(cp => cp.codePointAt(0).toString(16)) 
// <- ['6d', '61', 'f1', '61', '6e', '61'] 

normalized. length 


// <- 6 
注意 ， 要 想 测试 相等 性 ， 我 们 应 该 在 比较 它们 时 对 两 个 字符 串 都 使 用 String#normalize。 


function compare(left, right) { 
return left.normalize() === right.normalize() 
} 
const normal = 'mafiana’ 
const irregular = 'mafiana' 
normal === irregular 
// <- false 
compare(normal, irregular) 
// <- true 


7.4 正则 表达 式 


本 节 将 探讨 ES6 及 后 续 版 本 中 的 正则 表达 式 。ES6 引入 了 一 些 正 则 表达 式 修饰 符 : /y ( 粘 
连 修饰 符 ) 及 /u (Unicode 修饰 符 ) 。 接 下 来 我 们 将 讨论 TC39 上 通过 ECMAScript 规范 开 
发 流程 的 5 个 提案 。 


7.4.1 粘连 修饰 符 /y 


ES6 中 引入 了 粘连 修饰 符 y， 该 修饰 符 与 全 局 修饰 符 g9 相 似 。 同 全 局 正则 表达 式 一 
样 ， 粘 连 修饰 符 通常 用 于 多 次 匹配 ， 直 到 输入 字符 串 耗 尽 为 止 ， 且 粘连 正则 表达 式 会 将 
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LastIndex 移 到 最 后 一 次 匹配 的 位 置 。 唯 一 的 区 别 是 ， 粘 连 正则 表达 式 必 须 确保 匹配 从 剩 
余 的 第 一 个 位 置 开 始 ， 而 全 局 正则 表达 式 只 要 确保 剩余 位 置 存在 匹配 即 可 。 











以 下 示例 清楚 地 展示 了 两 者 间 的 区 别 。 当 输入 字符 串 为 "haha haha haha' 且 正 则 表达 式 为 
/ha/ 时 ， 全 局 修饰 符 将 在 每 次 出 现 'ha' 时 匹配 ， 而 粘连 修饰 符 将 会 匹配 前 两 个 ， 之 所 以 
这 样 ， 是 因为 第 三 次 出 现 'ha' 的 起 始 索引 是 5， 而 不 是 4。 











function matcher(regex, input) { 
return () => { 
const match = regex.exec(input) 
const LastIndex = regex.LastIndex 
return { LastIndex，match } 
} 
} 
const input = 'haha haha haha' 
const nextGlobal = matcher(/ha/g, input) 
console.log(nextGlobal()) // <- { LastIndex: 2, match: ['ha'] } 
console.log(nextGlobal()) // <- { LastIndex: 4, match: ['ha'] } 
console.log(nextGlobal()) // <- { LastIndex: 7, match: ['ha'] } 
const nextSticky = matcher(/ha/y, input) 
console.log(nextSticky()) // <- { LastIndex: 2, match: ['ha'] } 
console.log(nextSticky()) // <- { LastIndex: 4, match: ['ha'] } 
console.log(nextSticky()) // <- { LastIndex: 0, match: nuLL } 


如 果 强 行 移动 LastIndex， 就 可 以 验证 粘连 匹配 器 是 可 以 工作 的 ， 如 下 所 示 。 








const rsticky = /ha/y 

const nextSticky = matcher(rsticky, input) 
console.log(nextSticky()) // <- { LastIndex: 2, match: ['ha'] } 
console.log(nextSticky()) // <- { LastIndex: 4, match: ['ha'] } 
rsticky.lastIindex = 5 

console.log(nextSticky()) // <- { LastIndex: 7, match: ['ha'] } 





作为 提高 编译 器 中 的 词法 分 析 器 性 能 的 一 种 方式 添加 到 JavaScript 中 ， 粘 连 匹 配 很 大 程度 
上 要 依赖 于 正则 表达 式 。 


7.4.2 ”Unicode 修 饰 符 /u 


ES6 还 引入 了 一 个 u 修 饰 符 。u 代表 Unicode 模式 ， 这 个 修饰 符 可 以 视 为 更 严格 版 的 正则 





以 下 正则 表达 式 中 包含 了 一 个 无 须 转 义 的 字符 'a' ， 不 使 用 u 修饰 符 时 不 会 报错 。 


/\a/.test('ab') 
// <- true 




















但 对 字符 'a' 〈 非 正则 保留 字符 ) 进行 转 义 处 理 ， 同 时 使 用 u 修饰 符 ， 就 会 报错 ， 如 下 
所 示 。 
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/\a/u.test('ab') 

// <- SyntaxError: Invalid escape: /\a/ 
通过 ES6 中 新 引入 的 Unicode 字符 表示 法 ， 以 下 示例 试图 在 正则 表达 式 中 崩 入 马 表 情 符号 
'\u{1f49e}' ,但 正则 表达 式 无 法 匹配 马 表情 符号 。 如 果 不 使 用 u 修 饰 符 ，\u{.….} 这 种 形 
式 会 被 认为 是 包含 无 须 转 义 字符 u 的 序列 。 











/\u{if40e}/.test('®m') // <- false 
/\u{1f40e}/.test('u{1f40e}') // <- true 


u 修饰 符 引入 了 对 Unicode 代码 点 转 义 的 支持 ， 从 而 支持 在 正则 表达 式 中 使 用 表情 符号 ， 
如 \u{1f46e} 这 样 的 马 表情 符号 。 





/\u{1if40e}/u.test (' 知 ') 
// <- true 


在 不 使 用 u 修 饰 符 时 ，. 模式 可 以 匹配 除 终止 符 以 外 的 任何 BMP 符号 。 以 下 示例 测试 
U+1D11E MUSICAL SYMBOL G CLEF， 这 是 一 个 在 普通 正则 表达 式 中 无 法 匹配 . 模式 的 星 状 符号 。 





const rdot = /^.$/ 

rdot.test('a') // <- true 
rdot.test('\n') // <- false 
rdot.test('\u{1diie}') // <- false 








使 用 u 修饰 符 时 ， 不 在 BMP 中 的 Unicode 符号 也 可 以 被 匹配 。 以 下 示例 表明 ， 使 用 u 修 
饰 符 后 星 状 符号 也 可 以 匹配 . 模式 。 


const rdot = /^.$/u 
rdot.test('a') // <- true 
rdot.test('\n') // <- false 
rdot.test('\u{1diie}') // <- true 








使 用 u 修饰 符 时 ， 这 种 Unicode 的 严格 模式 也 可 以 应 用 于 量词 和 字符 类 ， 其 中 Unicode 代码 
点 将 被 视 为 单个 符号 ， 而 不 是 仅 匹 配 其 中 第 一 个 代码 单元 。u 修饰 符 和 不 区 分 大 小 写 的 i 
修饰 符 同 用 时 会 遵循 Unicode 的 大 写 转 换 规则 ， 以 规范 输入 字符 串 和 正则 表达 式 中 的 代 
码 点 。 


7.4.3 具名 捕获 组 
如 今 ，JavaScript 正则 表达 式 可 以 在 编号 捕获 组 和 非 捕获 组 中 对 匹配 进行 分 组 。 在 以 下 代 
码 中 ， 我 们 使 用 几 个 组 从 包含 由 '=' 分 隔 的 键 / 值 对 的 输入 字符 串 中 提取 键 和 值 。 


function parseKeyVaLuepPair(input) { 
const rattribute = /([a-z]+)=([a-z]+)/ 
































注 8: 要 想 了 解 更 多 关于 正则 表达 式 中 uv 修饰 符 的 细节 ， 可 以 阅读 一 下 Mathias Bynens 的 文章 Unicode-aware 
Regular Expressions in ES2015, 





A 
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const [, key, value] = rattribute.exec(input) 
return { key, value } 


parseKeyValuePair('strong=true') 
// <- { key: 'strong', value: 'true' } 


虽然 非 捕 获 组 会 被 丢弃 且 不 显示 在 最 终结 果 中 ， 但 对 匹配 仍然 有 用 。 除 了 支持 由 '=' 分 隔 
的 键 / 值 对 输入 外 ， 以 下 示例 还 支持 由 'is' 分 隔 的 键 / 值 对 输入 。 








function parseKeyValuepair(input) { 
const rattribute = /([a-z]+)(?:=|\sis\s)([a-z]+)/ 
const [, key, value] = rattribute.exec(input) 
return { key, value } 


} 

parseKeyValuePair('strong is true') 

// <- { key: 'strong', value: 'true' } 
parseKeyValuePair('flexible=too') 

// <- { key: 'flexible', value: 'too' } 


虽然 前 面 示例 中 的 数组 解构 隐藏 了 代码 对 数组 索引 的 依赖 ， 但 事实 是 ， 无 论 如 何 匹 配 
都 会 被 放置 在 有 序数 组 中 。 具 名 捕获 组 提案 ”( 撰 写本 书 时 处 于 阶段 3) 增加 了 类 似 于 
(?<groupName>) 的 语法 到 Unicode 正则 表达 式 ， 通 过 这 种 方式 为 捕获 组 命名 ， 就 可 以 在 返 
回 的 匹配 对 象 中 获得 groups 属性 了 。 调 用 RegExp#exec 或 String#match 时 ， 可 以 从 结果 对 
象 中 解构 groups 属性 。 











function parseKeyValuepair(input) { 
const rattribute = ( 
/(?<key>[a-z]+)(?:=|\sis\s)(?<value>[a-z]+)/ 
) 
const { groups } = rattribute.exec(input) 
return groups 


parseKeyValuePair('strong=true') 
// <- { key: 'strong', value: 'true' } 
parseKeyValuePair('flexible=too') 
// <- { key: 'flexible', value: 'too' } 











JavaScript 正则 表达 式 支持 反 向 引用 ， 其 中 捕获 组 可 以 复 用 于 查找 重复 项 。 以 下 代码 段 对 
第 一 个 捕获 组 使 用 反 向 引用 来 识别 "user:password' 输入 中 的 用 户 名 和 密码 相同 的 情况 。 





function hasSameUserAndPassword(Cinput) { 
const rduplicate = /([^:]+):\1/ 
return rduplicate.exec(input) !== null 
} 
hasSameUserAndPassword('root:root') // <- true 
hasSameUserAndPassword('root:pF6GGLlyPhoy1!9i') // <- false 


具名 捕获 组 提案 增加 了 对 具名 反 向 引用 的 支持 ,以 反 向 引用 具名 捕获 组 。 








注 9: 参见 具名 捕获 组 提案 文档 (https://github.com/tc39/proposal-regexp-named-groups)。 
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function hasSameUserAndPassword(Cinput) { 
const rduplicate = /(?<user>[^:]+):\k<user>/u 
return rduplicate.exec(input) !== null 
} 
hasSameUserAndPassword('root:root') // <- true 
hasSameUserAndPassword('root:pF6GGLlyPhoy1!9i') // <- false 


\k<groupName> 引用 可 以 与 编号 引用 串联 使 用 ， 但 在 使 用 具名 引用 时 最 好 避免 使 用 编号 引用 。 














最 后 ， 具 名 组 可 以 在 传递 给 String#replace 的 替换 中 直接 被 引用 。 在 以 下 代码 中 ， 我 们 使 
用 String#replace 以 及 具名 组 将 美国 日 期 格式 替换 成 匈牙利 日 期 格式 。 








function americanDateToHungarianFormat(input) { 
Const ramerican = ( 
/(?<month>\d{2})\/(?<day>\d{2})\/(?<year>\d{4})/ 
) 


const hungarian = input.repLace( 
ramerican, 
'$<year>-$<month>-$<day>" 


) 


return hungarian 


} 
americanDateToHungarianFormat('06/09/1988') 


// <- '1988-09-06' 
如 果 String#replace 的 第 二 个 参数 是 一 个 函数 ， 那 么 可 以 通过 参数 列表 末尾 的 一 个 名 为 
groups 的 新 参数 来 访问 具名 组 。 现 在 ， 该 功能 的 签名 是 (match，...captures,， groups)。 
在 以 下 示例 中 ， 注 意 我 们 是 如 何 使 用 与 上 个 示例 中 找到 的 替换 字符 串 类 似 的 模板 字面 量 。 
替换 字符 串 遵 循 $<groupName> 语法 而 非 $ { groupName } 的 事实 表明 ， 如 果 使 用 模板 字面 
量 ， 那 么 我 们 可 以 在 替换 字符 串 中 对 组 进行 命名 ， 而 不 必 诉 诸 转 义 码 。 












































function americanDateToHungarianFormat(input) { 
const ramerican = ( 
/(?<month>\d{2})\/(?<day>\d{2})\/(?<year>\d{4})/ 
) 
const hungarian = input.replace(ramerican, (...rest) => { 
const groups = rest[rest.Length - 1] 
const { month, day, year } = groups 
return ‘S${ year }-${ month }-${ day 下 
}) 
return hungarian 


} 
americanDateToHungarianFormat('06/09/1988') // <- '1988-09-06' 


7.4.4 ”Unicode 属 性 转 义 


Unicode 属性 转 义 提案 '”( 目 前 处 于 阶段 3) 描述 的 是 一 种 新 的 转 义 序列 ， 可 用 于 标 有 u 修 
饰 符 的 正则 表达 式 。 该 提案 为 二 进 制 Unicode 属性 和 非 二 进 制 Unicode 属性 分 别 添加 了 








注 10: 参见 Unicode 属性 转 义 提案 文档 (https://github.com/tc39/proposal-regexp-unicode-property-escapes)。 
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\p{LoneUnicodePropertyNameOrValue} 和 \p{UnicodePropertyName=UnicodePropertyValue} 
的 转 义 。\P 是 \p 的 反 向 匹配 ， 即 匹配 不 满足 条 件 的 字符 。 





Unicode 标准 为 每 个 符号 都 定义 了 属性 。 有 了 这 些 属 性 ， 我 们 就 可 以 对 Unicode 字符 进行 
高 级 查询 了 。 例 如 ， 和 希腊 字母 表 中 的 符号 的 Script 属性 值 为 Greek， 利 用 这 一 点 ， 我 们 可 
以 使 用 新 的 转 义 符 来 匹配 任何 希腊 文 的 Unicode 符号 。 























function isGreekSymbol(input) { 
const rgreek = /^\p{Script=Greek}$/u 
return rgreek.test(input) 


isGreekSymbol('n') 
// <- true 


或 者 我 们 也 可 以 用 \P 来 匹配 非 希腊 的 Unicode 符号 。 


function isNonGreekSymbol(input) { 
const rgreek = /^\pP{Script=Greek}$/u 
return rgreek.test(input) 


} 
isNonGreekSymbol('n') 


// <- false 


当 需 要 对 每 个 Unicode 的 十 进 制 数 符号 进行 匹配 ， 而 不 只 是 像 那样 \d 匹配 [0-9] 上 时， 我 们 
可 以 使 用 \p{Decimal_Number}， 如 下 所 示 。 





function isDecimalNumber(input) { 
const rdigits = /^\p{Decimal_Number}+$/u 
return rdigits.test(input) 


isDecimalNumber ('1234567890123456') 
// <- true 





你 可 以 查看 支持 的 Unicode 属性 和 值 (https://github.com/mathiasbynens/regexpu-core/blob/ 
master/property-escapes.md) 中 的 详尽 概述 。 





7.4.5 “后 行 断 言 

长 久 以 来 ，JavaScript 一 直 支 持 先 行 断 言 。 该 功能 允许 我 们 匹配 一 个 表达 式 ， 前 提 是 后 面 
跟着 男 一 个 表达 式 。 这 些 断 言 表达 为 (?=...)。 无 论 先 行 断 言 是 否 匹 配 ， 该 匹配 的 结果 都 
将 被 丢弃 ， 并 且 不 会 消耗 输入 字符 串 的 字符 。 
以 下 示例 用 先行 断言 来 测试 输入 字符 串 是 否 有 一 串 后 面 跟着 .js 的 字母 ， 在 这 种 情况 下 ， 
它 会 返回 没有 该 .js 部 分 的 文件 名 。 




















function getJavaScriptFilename(input) { 
const rfile = /^(?<filename>[a-z]+)(?=\.js)\.[a-z]+$/u 
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Const match = rfile.exec(input) 
if (match === nuLL) { 
return null 


l 


return match.groups.filename 


} 
getJavaScriptFilename('index.js') // <- 'index' 
getJavaScriptFilename('index.php') // <- null 


与 先行 肯定 断言 相反 ， 先 行 否 定 断 言 的 写法 是 (?!...)， 当 表达 式 不 匹配 时 ， 断 言 才 会 成 


功 。 以 下 代码 使 用 了 先行 否定 断言 ， 我 们 可 以 观察 到 匹配 结果 恰恰 相反 除了 js 结尾 的 
任何 表达 式 都 可 以 使 断言 通过 。 





function getNonJavaScriptFilename(input) { 
const rfile = /^(?<filename>[a-z]+)(?!\.js)\.[a-z]+$/u 
const match = rfile.exec(input) 
if (match === null) { 
return null 
} 
return match.groups.filename 
} 
getNonJavaScriptFilename('index.js') // <- null 
getNonJavaScriptFilename('index.php') // <- 'index' 





后 行 断言 提案 ”( 阶 段 3) 同时 引入 了 肯定 和 否定 的 后 行 断言 ,分 别 用 (?<=.…) 和 (?<!.…) 
表示 。 这 些 断 言 可 以 用 于 确认 我 们 想 要 匹配 的 模式 是 否 在 另 一 个 给 定 模式 之 后 。 以 下 代码 
使 用 后 行 肯定 断言 来 匹配 美元 金额 ， 而 不 是 欧元 金额 。 








function getDollarAmount(input) { 
const rdollars = /^(?<=\$)(?<amount>\d+(?:\.\d+)?)$/u 
Const match = rdollars.exec(input) 
if (match === null) { 
return null 
} 
return match.groups.amount 
} 
getDollarAmount('$12.34') // <- '12.34" 
getDollarAmount('€12.34') // <- null 





反 过 来 ， 后 行 否定 断言 可 以 用 于 匹配 非 美 元 金额 的 数字 。 


function getNonDollarAmount(input) { 
const rnumbers = /^(?<!\$)(?<amount>\d+(?:\.\d+)?)$/u 
Const match = rnumbers.exec(input) 
if (match === null) { 
return null 
} 


return match.groups.amount 





注 11: 参见 后 行 断言 提案 文档 (https://github.com/tc39/proposal-regexp-lookbehind ) 。 
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getNonDollarAmount('$12.34') // <- null 
getNonDollarAmount('€12.34') // <- '12.34' 


7.4.6 新 的 /s (dotALL) 修饰 符 





星 状 字符 (可 以 通过 添加 u 修饰 符 来 解决 ) 或 行 终止 符 。 


const rcharacter = /^.$/ 
rcharacter.test('a') // <- true 
rcharacter.test('\t') // <- true 
rcharacter.test('\n') // <- false 


在 使 用 . 模式 时 ， 我 们 通常 希望 匹配 每 个 独立 字符 。 然 而 ，JavaScript 中 的 . 表达 式 不 匹配 


有 时 开发 人 员 会 使 用 变通 的 方式 来 合成 与 任何 字符 匹配 的 模式 。 以 下 代码 中 的 表达 式 匹 配 





任何 字符 ， 从 而 实现 我 们 期 望 从 . 模式 匹配 器 中 获得 的 行为 。 


const rcharacter = /^[\sS\S]S/ 

rcharacter.test('a') // <- true 
rcharacter.test('\t') // <- true 
rcharacter.test('\n') // <- true 





dotAll 提案 ”( 阶 段 3) 添加 了 s 修饰 符 ， 该 修饰 符 使 得 JavaScript 正则 表达 式 中 的 . 可 以 





匹配 任何 独立 字符 。 


const rcharacter = /^.$/s 

rcharacter.test('a') // <- true 
rcharacter.test('\t') // <- true 
rcharacter.test('\n') // <- true 


7.4.7 String#matchAll 





通常 来 说 ， 当 使 用 全 局 或 粘连 修饰 符 的 正则 表达 式 时 ， 我 们 希望 遍历 每 个 匹配 所 























和 获 组 的 集 


合 。 目 前 ， 生 成 匹配 列表 可 能 有 点 麻烦 : 我 们 需要 在 循环 中 用 String#match 或 RegExp#exec 
来 收集 捕获 组 ， 直 到 正则 表达 式 与 LastIndex 不 匹配 为 止 。 以 下 示例 中 的 parseAttributes 


生成 器 函数 就 是 这 么 做 的 。 


function* parseAttributes(input) { 
const rattributes = /(\w+)="([^"]+)"\s/ig 
while (true) { 
const match = rattributes.exec(input) 
if (match === null) { 
break 
} 
const [ , key, value] = match 
yield [key, valuel] 
} 


注 12: 参见 dotAll 修饰 符 提案 文档 (https://github.com/tc39/proposal-regexp-dotall-flag) 。 
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} 

const html = '<input type="email" 
placeholder="hello@mjavascript.com" />' 
console.log(...parseAttributes(html)) 

//[ 

// ['type', 'email'] 

// ['placeholder', 'hello@mjavascript.com'] 
// ] 


这 种 方法 的 问题 是 ， 它 是 为 正则 表达 式 及 其 捕获 组 而 定制 的 。 现 在 ， 我 们 可 以 创建 一 个 只 
关注 遍历 匹配 并 收集 捕获 组 集合 的 matchAll 生成 器 来 解决 该 问题 ， 如 下 所 示 。 



































function* matchAll(regex, input) { 
while (true) { 
const match = regex.exec(input) 
if (match === null) { 


break 
} 
const [ ，...captures] = match 
yield captures 


} 
} 
function* parseAttributes(input) { 
const rattributes = /(\w+)="([^"]+)"\s/ig 
yield* matchAll(rattributes, input) 
} 
const html = '<input type="email" 
placeholder="hello@mjavascript.com" />' 
console.log(...parseAttributes(html)) 
//[ 
// ['type', 'email'] 
// ['placeholder', 'hello@mjavascript.com'] 
// ] 














然而 ， 每 次 调用 RegExp#exec 时 ，rattributes 都 会 改变 其 LastIndex 属性 ， 这 就 是 它 在 最 
后 一 次 匹配 后 跟踪 位 置 的 方式 。 当 没有 匹配 时 ，LastIndex 会 重新 设置 为 6。 如 果 我 们 不 一 
步 遍 历 所 有 可 能 匹配 的 输入 ， 那 么 会 产生 一 个 问题 ， 即 LastIndex 会 重 置 为 6， 然 后 我 们 
在 第 二 个 输入 上 使 用 正则 表达 式 ， 这 会 获得 意料 之 外 的 结果 。 




















虽然 我 们 的 matchALL 实现 看 起 来 不 会 因为 遍历 所 有 的 匹配 而 成 为 受害 者 ， 但 手动 友 代 生成 
器 是 可 能 的 。 这 意味 着 ， 如 果 重 用 相同 的 正则 表达 式 ， 那 我 们 就 会 遇 到 麻烦 ， 如 下 所 示 。 
注意 第 二 个 匹配 器 应 该 如 何 报告 ['type'，'text']， 而 不 是 从 比 9 索引 更 远 的 索引 开始 ， 
其 至 将 'placeholder' 关键 字 误 报 为 'laceholder'。 


const rattributes = /(\w+)="([^"]+)"\s/ig 

Const email = '<input type="email" 
placeholder="hello@mjavascript.com" />' 

const emailMatcher = matchAll(rattributes, email) 
const address = '<input type="text" 
placeholder="Enter your business address" />' 
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const addressMatcher = matchAll(rattributes, address) 


console.log(emailMatcher .next().value) 

// <- ['type', 'email'] 

console.log(addressMatcher .next().value) 

// <- ['laceholder', 'Enter your business address'] 


其 中 一 种 解决 方案 是 改变 


matchALL， 这 样 一 来 ， 当 我 们 回 到 消费 者 代码 时 ，LastIndex 始终 





为 6， 同 时 保持 astIndex 内 部 跟踪 ， 以 便 我 们 可 以 在 序列 的 
确实 ， 这 将 解决 我 们 所 遇 到 的 问题 ， 如 下 所 示 。 枯 














每 个 步骤 中 找到 离开 的 地 方 。 











此 ， 最 好 可 以 避免 使 用 可 复 用 的 全 局 正 


则 表达 式 ， 这 样 我 们 就 不 用 担心 在 每 次 使 用 后 重 置 LastIndex 了 。 





function* matchAll(regex, input) { 
let LastIndex = 0 
while (true) { 
regex.LastIndex = LastIndex 
Const match = regex.exec(input) 
if (match nuLL) { 
break 
} 
LastIndex = regex.LastIndex 
regex.LastIndex = 0 
const [ ，...captures] 
yield captures 
} 
} 
const rattributes = /(\w+)="([^"]+)"\s/ig 
const email = '<input type="email" 
placeholder="hello@mjavascript.com" />' 
const emailMatcher = matchAll(rattributes, email) 
const address = '<input type="text" 
placeholder="Enter your business address" />' 
const addressMatcher = matchAll(rattributes, address) 
console.log(emailMatcher .next().value) 
// <- ['type', 'email'] 
console.log(addressMatcher .next().value) 
// <- ['type', 'text'] 
console.log(emailMatcher .next().value) 
// <- ['placeholder', 'hello@mjavascript.com'] 
console.log(addressMatcher .next().value) 
// <- ['placeholder', 'Enter your business address'] 


= match 


String#matchAll 提议 ”( 阶 段 1) 为 字符 串 原型 引入 了 一 种 新 的 方法 ,除了 返回 的 迭代 器 是 











一 系列 match 对 象 而 不 只 是 前 
String#matchAll 序列 包含 整个 


match.groups 访问 命名 捕获 序 允 


下 示例 中 的 captures， 
match 对 象 ， 而 不 只 是 编号 
| 中 的 每 个 match。 




















这 意味 着 我 们 可 以 通 








const rattributes = /(?<key>\w+)="(?<value>[^"]+)"\s/igu 
const email = '<input type="email" 





注 13: 参见 String#matchAll 提案 文档 (https://github.com/tc39/proposal-string-matchall) 。 





与 matchAll 实现 类 似 。 
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placeholder="hello@mjavascript.com" />' 

for (const match of email.matchAll(rattributes)) { 
const { groups: { key, value } } = match 
console.log(${ key }: ${ value }°) 


} 
// <- type: email 
// <- placeholder: hello@mjavascript.com 


7.5 Array 


多 年 以 来 ， 在 谈 及 数组 时 ，Underscore 和 Lodash 这 样 的 库 都 高 调 抱怨 其 缺失 的 特性 。 后 
来 ，ES5 为 数组 添加 了 很 多 功能 方法 : Array#filter、Array#map、Array#reduce、Array# 
reduceRight、 Array#forEach、Array#some 和 Array#every。 





现在 ES6 又 新 增 了 一 些 有 助 于 操作 、 填 充 和 过 着 数组 的 方法 。 


7.5.1 Array.from 
在 ES6 问世 前 ，JavaScript 开发 人 员 通 常 需要 通过 一 个 函数 将 参数 转化 为 数组 。 


function cast() { 
return Array.prototype.slice.call(arguments) 

cast('a', 'b') 

// <- ['a', 'b'] 
学 习 了 第 2 章 中 的 剩余 参数 和 扩展 运算 符 后 ， 我 们 可 以 用 几 种 简洁 的 方式 来 实现 这 个 操 
作 。 扩 展 运算 符 可 以 使 用 迭代 器 协议 在 任意 对 象 中 生成 一 系列 值 ， 从 而 实现 上 述 操作 。 但 
使 用 扩展 运算 符 的 缺点 是 ， 我 们 想 要 用 扩展 进行 投射 的 对 象 必须 通过 实现 Symbol .iterator 
来 遵循 迭代 器 协议 。 好 在 ES6 中 的 arguments 实现 了 友 代 器 协议 。 








function cast() { 
return [...arguments] 


} 
cast('a', 'b') 
// <- ['a'’, 'b'] 


这 种 特殊 情况 下 使 用 剩余 参数 更 好 ， 因 为 它 不 涉及 arguments 对 象 ， 也 不 会 在 函数 体 中 添 
加 任何 逻辑 。 


function cast(...params) { 
return params 


cast('a', 'b') 
// <- ['a', 'b'] 


或 许 你 想 要 通过 扩展 运算 符 来 扩展 NodeList DOM 元 素 集 合 ， 如 通过 document.query- 
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SelectorAll 选 定 的 元 素 。 这 在 使 用 Arrayfmap 或 Array#filter 这 样 的 本 地 数组 方法 时 会 
很 方便 。ES6 重新 定义 了 迭代 器 协议 ， 新 的 DOM 标准 将 NodeList 升级 为 可 和 欠 代 的 ， 从 而 
使 得 上 述 操作 成 为 可 能 。 





[...document.querySelectorAll('div')] 
// <- [<div>, <div>, <div>, ...] 


试图 通过 扩展 运算 符 来 扩展 jQuery 集合 时 会 发 生 什 么 呢 ?” 如 果 你 使 用 的 是 实现 迭代 器 协议 
的 新 版 jQuery， 扩 展 jQuery 对 象 将 会 生效 ， 否 则 就 会 报告 异常 。 


[...$('div')] 


// <- [<div>, <div>, <div>, ...] 





新 的 Array.from 方法 有 些 不 同 。 它 不 会 依赖 迭代 器 协议 从 对 象 中 提取 值 ， 与 扩展 运算 符 不 
同 的 是 ， 它 支持 任何 类 数组 对 象 。 以 下 代码 段 可 用 于 任何 版 本 的 jQuery。 




















Array.from($('div')) 

// <- [<div>, <div>, <div>, ...] 
无 论 是 Array.fron 还 是 扩展 运算 符 ， 都 无 法 做 到 选择 一 个 开始 索引 。 假 设 你 想 要 获取 第 一 
个 <div> 元 素 后 的 所 有 <div> 元 素 ， 那 么 可 以 使 用 Array#slice。 








[].slice.call(document.querySelectorAll('div'), 1) 








当然 ， 你 也 可 以 在 进行 转换 后 再 使 用 Array#slice。 这 种 做 法 比 前 面 示例 的 可 读 性 更 高 ， 
因为 我 们 可 以 很 明确 地 看 到 想 要 分 割 数 组 的 位 置 。 














Array.from(document.querySelectorAll('div')).slice(1) 





Array.from 有 3 个 参数 ， 但 只 有 input 这 个 参数 是 必需 的 : 
。 _ input， 你 想 要 扩展 的 类 数组 对 象 或 可 迭代 对 象 ， 

。 map， 应 用 于 input 的 每 个 元 素 的 映射 函数 ， 

。 context， 调 用 map 时 的 this 绑 定 。 


虽然 Array.from 不 能 进行 对 象 的 分 割 ， 但 可 以 对 对 象 进行 逻辑 处 理 。map 函数 可 以 有 效 地 
将 值 映 射 到 其 他 值 上 ， 在 调用 Array.fron 的 同时 进行 映射 处 理 ， 并 生成 想 要 的 数组 。 














function typesof() { 
return Array.from(arguments, value => typeof value) 


typesof(null, [], NaN) 
// <- ['object', 'object', 'number'] 




















注意 ， 在 处 理 arguments 的 特殊 情况 时 ， 还 可 以 将 剩余 参数 和 Array#map 搭配 使 用 。 同 前 
面 的 Array#slice 示例 相同 ， 本 着 准确 清晰 的 原则 ， 以 下 示例 展示 的 处 理 更 为 合适 。 
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function typesof(...aLL) { 
return aLL.map(vaLue => typeof value) 


typesof(null, [], NaN) 
// <- ['object', 'object', 'number'] 


在 处 理 类 似 数组 的 对 象 时 ， 如 果 没 有 实现 Symbol.iterator， 使 用 Array.from 则 是 有 意义 的 。 


const apple = { 
type: 'fruit', 
name: 'Apple', 
amount: 3 
} 
const onion = { 
type: 'vegetable', 
name: 'Onion', 
amount: 1 
} 
const groceries = { 
0: apple, 
1: onion, 
length: 2 
} 
Array.from(groceries) 
// <- [apple, onion] 
Array.from(groceries, grocery => grocery.type) 
// <- ['fruit', 'vegetable'] 


7.5.2 Array.of 


Array.of 方法 与 前 面 用 过 的 cast 函数 完全 相同 。 以 下 代码 展示 了 如 何 编 写 一 个 Array.of 
的 ponyfill。 








function arrayOf(...items) { 
return items 


} 


Array 构造 函数 有 两 个 重 载 参数 ， 可 以 直接 传 和 数组 元 素 的 ...items， 以 及 传人 数组 具体 
长 度 的 length。Array.of 也 可 以 生成 一 个 新 的 数组 ， 只 是 该 数组 不 支持 传人 数组 长 度 。 在 
以 下 代码 中 ， 由 于 使 用 单 参 数 Length 重 载 构造 国 数 ， 你 会 发 现 new Array 的 奇怪 之 处 。 或 
许 你 会 对 浏览 器 控制 台中 的 undefined x ${ count } 符号 感到 困惑 ， 这 说 明 该 数组 中 存在 
空位 ， 这 种 数组 也 称 为 稀 玻 数组 。 


new Array() // <- [] 

new Array(undefined) // <- [undefined] 

new Array(1) // <- [undefined x 1] 

new Array(3) // <- [undefined x 3] 

new Array('3') // <- ['3'] 

new Array(1, 2) // <- [1, 2] 

new Array(-1, -2) // <- [-1, -2] 

new Array(-1) // <- RangeError: Invalid array length 
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相反 ， 由 于 不 支持 传 入 数组 长 度 ，Array.of 的 行为 更 为 可 控 。 就 稳定 性 而 言 ， 这 种 构建 数 
组 的 方式 更 为 理想 。 





console.log(Array.of()) // <- [] 
console.log(Array.of(undefined)) // <- [undefined] 
console.log(Array.of(1)) // <- [1] 
console.log(Array.of(3)) // <- [3] 
console.log(Array.of('3')) // <- ['3'] 
console.log(Array.of(1, 2)) // <- [1, 2] 
console.log(Array.of(-1, -2)) // <- [-1, -2] 
console.log(Array.of(-1)) // <- [-1] 


7.5.3 Array#copyWithin 
我 们 从 Array#copyWithin 签名 开始 着 手 。 


Array.prototype.copyWithin(target, start = 0, end = this.Length) 


Array#copyWithin 方法 将 数组 中 的 若干 成 员 复制 到 该 数组 的 target 位 置 ， 被 复制 的 成 员 是 
该 数组 中 [start，end) 这 一 区 间 内 的 元 素 。Array#copyNithin 方法 返回 数组 本 身 。 


我 们 来 看 一 个 简单 示例 ， 思 考 以 下 示例 中 的 items 数组 。 


const items = [1，2，3，，，，，，，，] 

// <- [1, 2, 3, undefined x 7] 
以 下 示例 中 的 函数 接收 一 个 items 数组 ， 并 决定 粘贴 到 的 目标 位 置 是 索引 6 (从 0 开始 )， 
被 复制 的 元 素 是 原 数 组 的 索引 1~3 之 间 的 元 素 (包含 索引 1， 但 不 包含 索引 3)。 

const items = [1，2，3，，，，，，，，] 


items.copyWithin(6, 1, 3) 
// <- [1, 2, 3, undefined x 3, 2, 3, undefined x 2] 














如 果 对 你 来 说 迅速 理解 Array#copyWithin 很 难 ， 那 我 们 来 看 看 分 解 动作 。 





























根据 定义 ， 被 复制 的 成 员 在 [start，end) 范围 内 ， 我 们 可 以 调用 Array#slice 来 得 到 这 些 
预计 粘贴 在 target 位 置 中 的 成 员 。 我 们 可 以 使 用 .slice 来 获取 副本 。 





const items = [1，2，3，，，，，，，，] 
const copy = items.slice(1, 3) 


// <- [2, 3] 
粘贴 操作 可 以 视 为 Array#splice 的 高 级 用 法 。 在 以 下 代码 中 ， 我 们 将 要 粘贴 的 位 置 传递 给 
splice， 同 时 删除 该 位 置 上 与 粘贴 成 员 数 量 相 同 的 数组 成 员 ， 并 插入 粘贴 的 成 员 。 注 意 ， 
我 们 使 用 的 是 扩展 运算 符 ， 因 此 元 素 是 通过 .splice 单独 插入 的 ， 而 不 是 作为 数组 插入 。 











const items = [1，2，3，，，，，，，，] 
const copy = items.slice(1, 3) 
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// <- [2, 3] 

items.splice(6, 3 - 1, ...copy) 

console.log(items) 

// <- [1, 2, 3, undefined x 3, 2, 3, undefined x 2] 


现在 我 们 更 好 地 理解 了 Array#copyWithin 的 内 部 运作 ， 我 们 可 以 简化 操作 来 实现 自 定义 的 
copyWithin 函数 ， 如 下 所 示 。 





function copyWithin( 
items, 
target, 
start = 0， 
end = items. length 

) { 
const copy = items.slice(start, end) 
const removed = end - start 
items.splice(target, removed, ...copy) 
return items 


} 
使 用 自 定义 的 copywithin 也 能 完美 实现 Array#copyWithin 的 功能 。 
copyWithin([1, 2， 3， EE: A -和 ]， 6， 1， 3) 
// <- [1, 2, 3, undefined x 3, 2, 3, undefined x 2] 
7.5.4 Array#fill 
这 是 一 种 方便 且 实 用 的 方法 ， 可 以 用 提供 的 value 替换 数组 中 的 所 有 成 员 。 注 意 ， 在 稀 玻 
数组 中 ， 这 个 值 将 填充 空位 并 替换 现 有 成 员 。 


'a', 工艺 'c'].fill('x') // si ‘XS ‘X's YX 
new Array(3).fLLLC'x') // <- ['x', 'x', 'x'] 


你 也 可 以 指定 起 始 索引 和 结束 索引 ， 只 有 指定 位 置 的 成 员 才 会 被 填充 ， 如 下 所 示 。 


a, by Ve. son] sfillC Xs 2) 
// ne 'a', 'b', De 5 'x'] 
new Array(5).fill('x', 0, 1) 

// <- ['x', undefined x 4] 





TI 





提供 的 vatue 可 以 是 任意 值 ， 并 不 局 限于 基本 类 型 人 














new Array(3).fill({}) 
// <- [{}, {}, {}] 


但 是 ， 你 不 能 用 带 有 index 参数 或 类 似 参 数 的 映射 方法 来 填充 数组 。 





Const map = => 1 x*x 2 
new Array(3).fill(map) 
// <- [map, map, map] 
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7.5.5 Array#find 和 0Array#findIndex 


Array#find 方法 为 数组 中 的 每 个 成 员 执行 caLLback 函数 ， 直 到 有 成 员 返 回 true 为 止 ， 然 
后 返回 该 成 员 。 该 方法 遵循 的 签名 是 (callback(item，ii，array)，context)， 使 用 方式 同 
Array#map、Array#filter 等 方法 相同 。 你 可 以 认为 Array#find 是 一 个 返回 匹配 元 素 (而 
不 只 是 true) 的 Array#some。 





['a', 'b', 'c', 'd', 'e'].find(item => item === 'c') 
// <- cc' 
['a', 'b', 'c', 'd', 'e'].find((item, i) => i === 0) 
// <- al' 
['a'’, 'b', 'c', 'd', 'e'].find(item => item === 'z') 


// <- undefined 





还 有 一 种 Array#findIndex 方法 ， 它 使 用 相同 的 签名 。 不 同 的 是 ，Array.findIndex 返回 匹 
配 元 素 的 索引 ， 而 不 是 一 个 布尔 值 或 元 素 本 身 。 当 没有 匹配 成 功 时 ，Array.findIndex 的 返 
回 值 为 -1， 如 下 所 示 。 





['a'’, 'b', 'c', 'd', 'e'].findIndex(item => item === 'c') 
// <- 2 
['a'’, 'b', 'c', 'd', 'e'].findIndex((item, i) => i === 0) 
// <- 0 
['a', 'b', 'c', 'd', 'e'].findIndex(item => item === 'z') 
// <- -1 


7.5.6 Array#keys 


Array#keys 返回 一 个 迭代 器 ， 该 和 迭代 器 产生 一 个 保存 数组 键 的 序列 。 返 回 值 是 一 个 迭代 
器 ， 意 味 着 你 可 以 使 用 for. .of 、 扩 展 运 算 符 或 手动 调用 .next() 来 欠 代 它 。 








[8 'b', BE 'd'].keys() 
// <- ArrayIterator {} 


以 下 是 for. .of 的 一 个 用 例 。 


for (Const key of ['a', 'b', 'c', 'd'].keys()) { 
console.log(key) 
// <- 0 
// <- 1 
// <- 2 
// <- 3 
} 


与 0bject.keys 以 及 大 多 数 迭 代数 组 的 方法 不 同 ， 该 序列 不 会 名 略 数组 中 的 空位 。 


Object.keys(new Array(4)) 
// <- [] 

[...new Array(4).keys()] 
// <- [0, 1, 2, 3] 
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接 下 来 轮 到 值 了 。 


7.5.7 Array#values 


Array#values 和 Array#keys() 相同 ， 但 返回 的 迭代 器 是 一 系列 值 而 不 是 键 。 实 际 上 ， 你 可 
能 会 想 要 迭代 数组 本 身 ， 但 有 时 获得 一 个 迭代 器 可 能 更 为 方便 一 些 。 





['a', 'b', 'c', 'd'].values() 
// <- ArrayIterator {} 





你 可 以 使 用 for..of 或 其 他 任何 方法 (如 扩展 运算 符 ) 来 提取 可 迭代 的 序列 。 以 下 示例 在 
数组 的 .values() 上 使 用 扩展 运算 符 来 创建 该 数组 的 副本 。 


[...['a', 'b', 'c', 'd'].values()] 
Wes [as be a 





注意 ， 省 略 .values() 方法 调用 仍然 会 生成 数组 的 副本 : 序列 被 迭代 并 扩展 在 新 数组 中 。 


7.5.8 Array#entries 
Array#entries 与 前 面 的 两 个 方法 类 似 ， 但 其 返回 值 是 含有 一 系列 键 / 值 对 的 迭代 器 。 














['a', 'b', 'c', 'd'].entries() 
// <- ArrayIterator {} 


序列 中 的 每 个 成 员 是 键 和 值 组 成 的 二 维 数组 。 


[...['a', 'b', 'c', 'd'].entries()] 
// < [[0， "a'], EL 'b'], [2， ‘€"]s [3:; 'd']] 


现在 只 剩 下 最 后 一 个 方法 了 ! 


7.5.9 Array.prototype[SymboL.iterator] 
这 个 方法 与 Array#values 完全 相同 。 


const list = ['a', 'b', 'c', 'd'] 
list[Symbol.iterator] === list.values 
// <- true 
[...list[Symbol.iterator]()] 

fs Tt bs gg] 


以 下 示例 结合 使 用 扩展 运算 符 、 数 组 和 Symbol.iterator 进行 数组 值 的 迭代 。 你 能 读 懂 这 
段 代 码 吗 ? 


.['a'’, 'b', 'c', 'd'][Symbol.iterator]()] 
// ee ['a', 加 LE "d 





我 们 用 分 解 的 思想 来 分 析 一 下 这 段 代 码 。 首 先 ， 有 这 样 一 个 数组 。 





Da "Bs EE 'd'] 
// Ce Ea "By; Le 'd'] 


接着 ， 我 们 得 到 一 个 迭代 器 。 


['a'’, 'b', 'c', 'd'][Symbol.iterator]() 
// <- ArrayIterator {} 


最 后 ， 我 们 将 迭代 器 扩展 在 一 个 新 的 数组 上 ， 以 创建 一 个 副本 。 


[...['a'，"b'，'c"，'d'][SymboL.iterator]()] 
了 
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第 8 和 章 





JavaScript 模 块 





近 儿 年 涌现 了 很 多 分 而 治之 的 代码 管理 方案 。 长 和 久 以 来 ， 我们 一 直 使 用 所 谓 的 模块 模式 ， 
即将 代码 包装 到 自 调用 的 函数 表达 式 中 。 我 们 必须 自己 管理 脚本 的 次 序 ， 以 确保 每 个 模块 





都 在 自己 的 依赖 之 后 加 载 。 











后 来 ，RequireJS 库 出 现 了 。 它 提供 了 以 编程 方式 定义 每 个 模块 依赖 的 机 制 ， 有 了 依赖 


















































/说 








后 ， 我 们 就 不 必 再 操心 脚本 的 加 载 次 序 了 。RequireJS 接受 一 个 字符 串 数组 ， 以 明确 依赖 ， 








同时 将 模块 包装 为 一 个 函数 调用 ， 而 这 个 函数 接受 前 








都 支持 类 似 的 功能 ， 只 不 过 API 不 大 一 样 。 


一 



































看 的 依赖 作为 参数 。 其 实 很 多 其 他 库 





还 有 其 他 的 复杂 依赖 管理 机 制 ， 如 AngularJS 中 的 依赖 注入 机 制 。 该 机 制 需 要 我 们 用 函数 
定义 命名 组 件 ， 并 相应 地 指定 其 他 命名 组 件 依 赖 。AngularJS 会 殖 我 们 管理 依赖 注入 的 加 























载 ， 我 们 要 做 的 只 是 命名 组 件 和 指定 依赖 。 





取代 RequireJS 的 是 CommonJS ， 随 着 Node.js 的 火爆 ，CommonJS 迅速 走红 。 本 章 将 先 介 
绍 CommonJS ， 毕 竞 它 在 今天 的 应 用 还 相当 普遍 。 接 下 来 本 章 将 介绍 ES6 为 JavaScript 引 
入 的 原生 模块 系统 。 最 后 ， 本 章 将 探讨 CommonJS 与 原生 JavaScript 模块 〈( 即 人 们 常 说 的 








ECMAScript 模块 ) 的 互 用 性 。 


8.1 CommonyJS 














CommonJS 与 其 他 模块 化 方案 的 不 同 之 处 是 ， 它 将 每 个 文件 都 看 成 一 个 模块 ， 其 他 方案 则 以 
编程 方式 声明 模块 。CommonJS 模块 拥有 隐 含 的 局 部 作用 域 ， 全 局 作用 域 必须 通过 global 显 











式 地 被 访问 。CommonJS 模块 导入 依赖 及 导出 供 
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外 部 调 月 


日 的 接口 都 是 动态 的 ， 导 入 依赖 是 通 


过 require 函数 调用 实现 的 。 这 个 函数 调用 是 同步 的 ， 会 返回 所 请 求 模 块 暴露 的 接口 。 











不 看 代码 很 难说 清 一 种 模块 的 定义 语法 。 以 下 代码 展示 了 一 个 可 重用 的 CommonJS 模块 文 
件 。 甚 中 的 has 和 union 函数 都 位 于 模块 的 局 部 作用 域内 。 在 此 之 上 ， 我 们 再 将 union 赋 
给 module.exports， 它 就 成 了 这 个 模块 的 公共 API。 























function has(list, item) { 
return list.includes(item) 
} 
function union(list, item) { 
if (has(list, item)) { 
return list 


return [...list, item] 


} 


module.exports = union 


假设 将 以 上 文件 保存 为 union.js， 那 我 们 就 可 以 在 另 一 个 CommonJS 模块 中 调用 它 。 比 如 ， 
另 一 个 文件 是 app.js， 为 了 调用 union.js， 需 要 给 require 传 入 一 个 相对 路 径 。 








const union = require('./union.js') 
console.log(union([1, 2], 3)) 

// <- [1, 2, 3] 
console.log(union([1, 2], 2)) 

// <- [1, 2] 


如 有 果 扩展 名 是 js 或 ,json， 则 可 以 省 略 ， 但 不 鼓励 这 么 做 。 
虽然 扩展 名 对 require 语句 来 说 是 可 选 的 ， 在 使 用 node CLI 时 最 好 还 是 养 成 添 


加 扩展 名 的 习惯 。 浏 览 器 对 ESM 的 实现 不 允许 省 略 扩展 名 ， 否 则 就 会 导致 多 
一 次 到 服务 器 的 往返 才能 找到 作为 HTTP 资源 的 JavaScript 模块 的 正确 端点 。 











在 Node.js 环境 下 ， 我 们 可 以 通过 CLI 运行 app.js， 如 下 所 示 。 


» node app.js 
# [1，2，3] 
# [1，2] 





安装 Nodejs 后 ， 就 可 以 在 终端 命令 行 中 使 用 node 程序 。 





正如 其 他 JavaScript 函数 那样 ，CommonJS 中 的 require 国 数 也 可 以 被 动态 调用 。 我 们 可 以 
利用 这 一 特性 实现 通过 一 个 接口 动态 获取 不 同 的 模块 。 举 个 例子 ， 假 设 有 一 个 模板 目录 ， 
其 中 包含 几 个 视图 模板 文件 ， 每 个 文件 都 导出 一 个 函数 。 这 些 函 数 都 接受 一 个 模型 参数 ， 
然后 返回 一 个 HTML 字符 串 。 
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通过 读 取 model 对 象 的 属性 ， 以 下 代码 中 展示 的 模板 函数 构造 并 返回 购物 车 中 的 一 个 商品 。 








// views/item.js 

module.exports = model => <li> 
<span>${ model.amount }</span> 
<span>x </span> 
<span>${ model.name }</span> 

</li>. 





应 用 模块 可 以 基于 这 个 item.js 提供 的 视图 模板 打印 一 个 <ti> 元 素 。 





// app.js 
const renderItem = require('./views/item.js') 
const html = renderItem({ 

name: 'Banana bread', 

amount: 3 


}) 
console.log(html) 


图 8-1 展示 了 这 个 小 应 用 的 执行 结果 。 





bevacqua@MacBook-Pro: ~/dev/practical-modern-javascript/code/ch08/ex01-cjs-grocery-item 


master 
» Cat app.]s 
const renderItem = require( '"./Vviews/item') 
const html = renderItem({ 

name: "Banana bread ' ， 

amount: 3 


}) 


» node app 
<li> 


<span> 
<span>x </span> 
<span>Banana bread</span> 
</]i> 
master “~/dev/practical-modern-j 














图 8-1， 将 模型 泻 染 为 HTML 就 是 向 模板 字面 量 中 插值 而 已 


接 下 来 的 这 个 模板 用 于 泻 染 购物 车 中 的 所 有 商品 。 它 接受 一 个 商品 数组 ， 并 重用 前 面 的 
item.js 模板 来 泻 染 每 件 商品 。 














// views/list.js 
const renderItem = require('./item.js') 


module.exports = model => ‘<ul> 
${ model.map(renderItem).join('\n') } 
</ul>. 


我 们 可 以 像 前 面 那样 使 用 listjs 模板 。 但 要 注意 ， 传 给 它 的 模型 必须 是 一 个 商品 数组 ， 而 
非 单个 商品 对 象 。 
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// app.js 
const renderList = require('./views/list.js') 
const html = renderList([{ 
name: 'Banana bread ' ， 
amount: 3 
下 二 
name: 'Chocolate chip muffin ' ， 
amount: 2 
}]) 
console. log(html) 





图 8-2 展示 了 小 应 用 的 当前 状况 。 








bevacqua@MacBook-Pro: ~/dev/practical-modern-javascript/code/ch08/ex02-cjs-gr 
master 

» Cat app.]s 

const renderList require('./views/list') 

const html = renderList([{ 
name: "Banana bread ' ， 
amount: 3 


Name: 
amount : 


"Chocolate chip muffin', 
2 


» Node app 


<ul> 








ocery-list 








图 8-2: 基于 模板 字面 量 的 复合 模板 同样 是 信 手 折 来 


到 目前 为 止 ， 这 个 示例 只 写 了 几 个 小 模块 ， 每 个 模块 只 基于 传人 的 模型 对 象 和 视图 模板 生 


成 一 种 HTML 视图 。 简 单 的 API 便于 重用 ， 











因此 我 们 才能 轻松 地 将 模型 映射 到 item.js 模 


板 函 数 ， 以 浑 染 出 多 个 商品 ， 最 后 再 通过 换行 符 ; 

















既然 两 个 视图 的 API 相似 ， 都 是 接受 一 个 模型 六 
象 一 下 。 如 果 想 


来 轻松 实现 。 以 下 示例 的 核心 是 构建 指向 模板 模块 的 路 径 。 与 前 面 








require 调用 并 没有 出 现在 模块 代码 的 顶部 。 对 r 
可 以 嵌 套 在 其 他 国 数 中 。 


竹 它 们 连接 起 来 。 





返回 一 段 HTML 字符 串 ， 那 么 就 可 以 抽 


要 一 个 render 函数 能 够 浑 染 任何 模板 ， 那 么 可 以 借助 require 的 动态 特性 


代码 的 重要 不 同 点 是 ， 
现在 任何 地 方 ， 甚 至 








equire 的 调用 可 以 吕 
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// render.js 
module.exports = function render(template, model) { 
return require(’./views/${ template }' .js)(model) 


} 


有 了 这 样 的 API 后 ， 就 不 用 操心 调用 requtre 时 传人 的 视图 模板 路 径 是 否 正确 了 ， 因 为 
renderjs 模块 会 正确 拼接 出 路 径 。 要 想 泻 染 模板 ， 只 要 传人 模板 的 名 字 和 该 模板 所 需要 的 
模型 即 可 ， 如 以 下 代码 和 图 8-3 所 示 。 





























// app.js 
const render = require('./render.js') 
console.log(render('item', { 
name: 'Banana bread', 
amount: 1 
})) 
console.log(render('list', [{ 
name: 'Apple pie', 


amount: 2 

}, { 
name: 'Roasted almond', 
amount: 25 

}])) 





master 

» Cat app.]s 

(ol A 

console.log(render('item', { 
name: 'Banana bread', 
amount: 1 

})) 

console.log(render('list', [{ 
name: "Apple pie'’, 
Te 

pe 
name: 'Roasted almond', 
amount: 25 


</ span> 
>X </Span> 
>Apple pie</span> 


ipt/code/ch08/ex03-cjs-dynamic-render 














8-3: 模板 字面 量 使 得 创建 HTML 泻 染 应 用 变 得 易如反掌 
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接 下 来 ， 我 们 会 看 到 ES6 模块 从 某 种 程度 上 受到 了 CommonJS 的 影响 。 接 下 来 几 节 会 讨论 
export 和 import 语句 ， 以 及 ESM 与 CommonJS 有 哪些 相通 之 处 。 


8.2 ” JavaScript 模块 











在 前 面 介 绍 CommonJS 模块 时 ， 我 们 已 经 知道 其 API 简单 却 非 常 灵 活 、 强 大 。ES6 模块 的 











API 甚至 比 它 还 要 简单 ， 虽 然 灵活 性 稍微 差 了 点 ， 但 几乎 是 一 样 强 大 的 。 


8.2.1 严格 模式 





在 ES6 模块 系统 中 ， 严 格 模式 默认 是 打开 的 。 严 格 模式 是 一 个 特性 :， 用 于 拒绝 JavaScript 








中 那些 不 好 的 特性 ， 并 让 很 多 静默 错误 变 成 异常 ， 从 而 被 抛 出 。 在 拒绝 这 些 特性 的 基础 
上 ， 编 译 器 可 以 启用 优化 策略 ， 让 JavaScript 运行 时 更 快 、 更 安全 。 











变量 必须 被 声明 。 
国 数 参 数 的 名 字 必 须 是 唯一 的 。 





。 禁止 使 用 with 语句 。 


为 只 读 属 性 赋值 会 导致 抛 出 错误 。 

99749 这 样 的 八进制 数 是 语法 错误 。 

用 delete 删除 不 可 删除 的 属性 会 抛 出 错误 。 

delete prop 是 语法 错误 ，delete global.prop 才 是 正确 的 。 
eval 不 会 为 周围 的 作用 域 引 入 新 变量 

eval 和 arguments 不 能 被 绑 定 或 赋值 

arguments 不 会 神奇 地 同步 方法 参数 的 变化 。 

不 再 支持 arguments.callee， 访问 它 会 抛 出 TypeError。 

不 再 支持 arguments.caller， 访问 它 会 抛 出 TypeError。 
方法 调用 中 作为 this 传递 的 上 下 文 不 会 被 “ 装 箱 ” 为 0bject。 
不 能 再 使 用 fn.caller 和 fn.arguments 来 访问 JavaScript 栈 。 
保留 字 (如 protected、static、interface 等 ) 不 能 被 绑 定 。 























接 下 来 我 们 将 深入 探讨 一 下 export 语句 。 


8.2.2 ”export 语 名 











在 CommonJS 模块 中 ， 要 导出 的 值 必须 赋 给 module.exports。 可 以 导出 的 内 容 包 括 任意 类 


开 


型 的 值 、 对 象 、 数 组 、 函 数 ， 如 下 所 示 。 











主 1: 建议 阅读 一 下 有 关 MDN 上 严格 模式 的 完整 介绍 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/ 


Reference/Strict mode)。 
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module.exports = 'hello' 
module.exports = { hello: 'world' } 
module.exports = ['hello', 'world'] 


module.exports = function hello() 全 





作为 文件 ，ES6 模块 是 通过 export 语句 暴露 API 的 。ESM 中 的 声明 只 在 局 部 作用 域 中 有 


效 ， 这 一 点 与 CommonJS 相同 。 模 块 中 声明 的 任何 变量 都 必须 作为 该 模块 的 API 导入 ， 并 





且 在 想 要 使 用 它们 的 模块 中 导入 才能 访问 。 
1. 导出 默认 绑 定 


下 





将 前 面 CommonJS 代码 中 的 module.exports = 替换 成 export default 即 可 在 ESM 中 实现 

















相同 的 效果 。 
export default 'hello' 
export default { hello: 'world' } 
export default ['hello', 'world'] 


export default function hello() {} 


在 CommonJS 中 ,我们 可 以 为 nodule.exports 动态 赋值 。 


function initialize() { 
module.exports = 'hello!' 


initialize() 


相 较 于 CommonJS，ESM 中 的 export 语句 只 能 出 现在 模块 顶级 。export 语句 “只 能 


在 顶级 ”是 一 个 很 好 的 限制 ， 因 为 根据 方法 调用 来 动态 定义 并 暴露 API 并 不 是 非常 必要 。 




















这 一 限制 还 有 助 于 编译 器 及 静态 分 析 工 具 解 析 ES6 模块 。 


function initialize() { 
export default 'hello!' // SyntaxError 


initialize() 
除了 export default 语句 ，ESM 还 支持 其 他 暴露 API 的 方式 。 


2. 命名 导出 








昌 现 


在 CommonJS 中 ， 如 果 想 要 暴露 多 个 值 ， 不 一 定 需要 导出 一 个 包含 这 些 值 的 对 象 。 我 们 
可 以 将 这 些 值 赋 给 隐 含 的 module.exports 对 象 。 这 样 导出 的 仍然 只 是 一 个 绑 定 ， 其 中 包含 
module.exports 对 象 最 终 持 有 的 所 有 属性 。 也 就 是 说 ， 虽 然 以 下 示例 看 似 导 出 了 两 个 值 ， 



































但 实际 上 它们 都 是 最 终 导出 对 象 的 属性 。 
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module.exports.counter = 0 
module.exports.count = () => moduLe.exports .Counter++ 


在 ESM 中 ， 我 们 可 以 通过 命名 导出 语法 复 现 这 一 行为 。 相 较 于 CommonJS 为 隐 含 的 
module.exports 对 象 添 加 属性 ，ES6 是 直接 声明 要 导出 的 绑 定 ， 如 下 所 示 。 





export Let counter = 0 
export const count = () => Counter++ 














注意 ， 前 面 的 代码 不 能 将 变量 声明 提取 为 独立 的 语句 ， 然 后 再 作为 命名 导出 传 给 export， 
否则 会 导致 语法 错误 。 

Let counter = 0 

const count = () => Counter++ 


export counter // SyntaxError 
export count 


ESM 这 样 严 格 限 制 模 块 中 声明 的 语法 是 为 了 方便 静态 分 析 ， 但 代价 是 损失 一 些 灵 活性 。 要 
想 提高 灵活 性 ， 就 必然 会 提高 复杂 性 ， 这 也 是 ESM 不 提供 灵活 接口 的 正当 理由 。 


3. 导出 列表 
ES6 模块 支持 导出 顶级 命名 成 员 的 列表 ， 如 下 所 示 。 这 种 导出 列表 的 语法 很 容易 解析 ， 同 
时 也 就 前 面 提 出 的 问题 给 出 了 一 个 解决 方案 。 

Let counter = 0 


Const count = () => Counter++ 
export { counter, count } 






































要 想 重 命名 导出 的 绑 定 ， 可 以 使 用 别名 语法 export { count as increment}。 这 样 我 们 就 
可 以 将 局 部 作用 域 中 的 绑 定 count 以 别名 increment 提供 给 外 部 ， 如 下 所 示 。 





Let counter = 0 
const count = () => Counter++ 
export { counter, count as increment } 


最 后 ， 使 用 命名 成 员 列 表 语 法 时 还 可 以 指定 默认 导出 。 以 下 代码 使 用 as default 在 导出 多 
个 命名 成 员 的 同时 定义 了 模块 的 默认 导出 。 
let counter = 0 


const count = () => Counter++ 
export { counter as default, count as increment } 





虽然 以 下 代码 长 了 点 ， 但 功能 与 上 段 代 码 相 同 。 


Let counter = 0 

const count = () => Counter++ 
export default counter 

export { count as increment } 


需要 特别 注意 的 是 ， 我 们 导出 的 是 绑 定 ， 而 不 只 是 值 。 
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4. 绑 定 ， 而 不 是 值 

ES6 模块 导出 绑 定 ， 而 不 是 值 或 引用 。 这 意味 着 以 下 示例 中 的 模块 导出 的 fungible 会 绑 定 
到 这 个 模块 的 fungible 变量 ， 其 值 会 随 fungible 变量 的 变化 而 变化 。 被 其 他 模块 引用 后 
再 改变 公共 接口 可 能 会 导致 困惑 ， 但 这 一 机 制 在 某 些 情况 下 确实 也 很 有 用 。 


在 以 下 代码 中 ， 模 块 导出 的 fungible 一 开始 绑 定 的 是 一 个 对 象 ，5 秒 后 又 改 成 了 一 个 数组 。 

















export Let fungible = { name: 'bound' } 
setTimeout(() => fungible = [0, 1, 2], 5000) 


使 用 这 个 API 的 模块 在 5 秒 后 也 能 看 到 fungible 值 的 变化 。 以 下 示例 每 隔 2 秒 会 打印 一 次 
引入 的 绑 定 。 


import { fungible } from './fungible.js’ 


console.log(fungible) // <- { name: 'bound' } 
setInterval(() => console.log(fungible), 2000) 
// <- { name: 'bound' } 

// <- { name: 'bound' } 

// <- [0, 1, 2] 

// <- [0, 1, 2] 

// < [9, 1， 2] 

这 种 行为 特别 适合 计数 器 和 标记 ， 但 除非 用 途 明确 ， 最 好 不 要 使 用 。 毕 竟 从 使 用 者 的 角度 


来 看 ，API 接口 不 确定 很 难 理解 。 
JavaScript 的 模块 系统 还 提供 了 一 个 export..fron 语法 ， 用 于 暴露 其 他 模块 的 接口 。 


5. 导出 另 一 个 模块 
问 export 添加 一 个 from 子 句 就 可 以 导出 另 一 个 模块 的 命名 导出 。 此 时 绑 定 不 会 导入 到 当前 
模块 的 作用 域 。 换 名 话说 ， 当 前 模块 只 是 传递 另 一 个 模块 的 绑 定 ， 并 不 能 直接 访问 该 绑 定 。 











export { increment } from './counter.js’ 
increment() 
// ReferenceError: increment is not defined 


在 传递 绑 定 时 ， 我 们 可 以 为 命名 导出 起 个 别名 。 如 果 以 下 示例 中 的 模块 被 命名 为 aliased， 
那么 调用 者 可 以 通过 ;import { add } from 'aliased.js' 取得 counter 模块 中 的 increment 
的 绑 定 。 


export { increment as add } from './counter.js' 


ESM 也 支持 用 通配符 导出 另 一 个 模块 中 的 所 有 命名 导出 ， 如 下 所 示 。 但 要 注意 ， 此 时 不 会 
导出 counter 模块 中 的 默认 绑 定 。 


export * from './counter.js' 





A 
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要 想 导出 另 一 个 模块 的 default 绑 定 ， 必 须 使 用 导出 列表 语法 来 添加 别名 。 
export { default as counter } from './counter.js' 


我 们 将 ES6 模块 暴露 API 的 所 有 语法 都 过 了 一 遍 。 接 下 来 我 们 将 探讨 一 下 import 语句 ， 
看 看 如 何 通过 它 使 用 其 他 模块 。 


8.2.3 import 语 名 

我 们 可 以 用 import 语句 在 一 个 模块 中 加 载 另 一 个 模块 。 加 载 模块 的 语法 因 实 现 而 不 同 ， 也 
就 是 说 ， 规 范 并 未 就 此 给 出 描述 。 如 今 ， 我 们 可 以 编写 兼容 ES6 规范 的 代码 ， 而 一 些 聪明 
的 人 已 经 找到 了 在 浏览 器 中 处 理 模 块 加 载 的 办 法 。 





























Babel 这 样 的 编译 器 可 以 基于 CommonJS 等 模块 系统 拼接 模块 。 这 意味 着 Babel 中 的 
import 语句 与 CommonJSs 中 的 require 具有 相同 的 语义 。 





假设 模块 /counterjs 包含 以 下 代码 。 


Let counter = 0 

Const increment = () => counter++ 

Const decrement = () => counter-- 

export { counter as default, increment, decrement } 


以 下 这 行 代 码 可 以 将 counter 模块 加 载 到 我 们 的 app 模块 中 。 这 行 代 码 不 会 在 app 模块 的 


作用 域 中 创建 任何 变量 。 但 是 这 会 导致 counter 模块 中 的 所 有 顶级 代码 执行 ， 包 括 该 模块 
自己 的 import 语句 。 





import './counter.js' 


与 export 语句 类 似 ，import 语句 也 只 允许 出 现在 模块 代码 的 顶级 。 这 一 限制 有 助 于 编译 
器 简化 自己 的 模块 加 载 逻 辑 ， 同 时 有 助 于 其 他 静态 分 析 工 具 解 析 你 的 代码 。 


1. 导入 默认 导出 
CommonJS 模块 通过 require 语句 导入 其 他 模块 。 如 果 需 要 引入 茶 个 模块 的 默认 导出 ， 只 
要 将 该 语句 的 结果 赋 给 一 个 变量 即 可 。 


























const counter = require('./counter.js') 
要 想 导入 ES6 模块 导出 的 默认 绑 定 ， 就 必须 给 它 起 个 名 字 。 但 语法 和 语义 与 声明 变量 时 有 


些 不 同 ， 因 为 这 里 是 导入 绑 定 ， 而 不 只 是 将 值 赋 给 一 个 变量 。 这 个 区 别 有 助 于 静态 分 析 工 
有 具 和 编译 器 更 轻松 地 解析 我 们 的 代码 。 

















import counter from './counter.js' 
console.log(counter) 


// <- 0 
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除了 默认 导出 ， 我 们 也 可 以 导入 命名 导出 并 给 它们 起 别名 。 


2. 导入 命名 导出 
以 下 代码 展示 了 如 何 从 counter 模块 导入 increment 方法 。 导 入 命名 导出 的 语法 是 一 对 花 
括号 ， 这 让 我 们 联想 到 了 解构 赋值 。 








import { increment } from './counter.js’ 





为 了 导入 多 个 绑 定 ， 绑 定之 间 以 逗号 分 隔 。 
import { increment, decrement } from './counter.js' 


这 里 的 语法 和 语义 与 解构 有 些 不 同 。 比 如 ， 解 构 通过 冒号 创建 别名 ， 而 import 语句 则 使 用 as 
关键 字 ， 照 搬 了 export 语句 的 语法 。 以 下 代码 在 导入 increment 方法 时 将 其 重 命名 为 add。 











import { increment as add } from './counter.js' 
以 逗号 作为 分 隔 符 ， 我 们 可 以 同时 导入 默认 导出 和 命名 导出 。 

import counter, { increment } from './counter.js' 
我 们 也 可 以 给 default 绑 定 命名 ， 此 时 需要 一 个 别名 。 


import { default as counter, increment } from './counter.js' 





以 下 的 代码 示例 展示 了 ESM 与 CommonJS 导入 在 语义 上 的 区 别 。 记 住 ，ESM 中 导出 和 导入 
的 是 绑 定 ， 而 不 是 引用 。 为 方便 理解 ， 你 可 以 将 以 下 代码 中 的 绑 定 counter 想象 为 一 个 属性 
的 获取 方法 (getter) ， 它 可 以 访问 counter 模块 内 部 并 返回 其 局 部 变量 counter 的 值 。 




















import counter, { increment } from './counter.js' 
console.log(counter) // <- 0 

increment() 

console.log(counter) // <- 1 

increment() 

console.log(counter) // <- 2 


最 后 ， 我 们 将 探讨 命名 空间 导入 。 
3. 通配符 导入 语句 
我 们 可 以 用 通配符 导入 一 个 模块 的 命名 空间 对 象 。 相 较 于 导入 命名 导出 或 默认 导出 ， 这 样 


可 以 一 次 性 导入 所 有 导出 。 注 意 ， 星 号 * 后 面 必 须 紧 跟 别名 ， 导 入 的 所 有 绑 定 都 在 这 个 别 
名 名 下 。 如 果 存 在 default 导出 ， 那 么 它 也 会 被 放 到 这 个 命名 空间 绑 定之 下 。 





























import * as counter from './counter.js' 
counter .increment() 

Counter .increment() 
consoLe.Log(counter .default) // <- 2 





-A 
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8.2.4 动态 import() 

在 撰写 本 书 时 ， 有 人 提出 了 有 关 动态 import() 表达 式 的 提案 (阶段 3)。 与 import 语句 的 
静态 分 析 和 链接 不 同 ，import() 在 运行 时 加 载 模块 ， 并 在 获取 、 解 析 并 运行 请 求 的 模块 及 
其 所 有 依赖 后 ， 返 回 一 个 包含 该 模块 命名 空间 对 象 的 Promise。 











与 import 语句 类 似 ， 此 时 的 模块 说 明 符 可 以 是 任意 字符 串 。 但 与 import 只 允许 静态 的 字 
符 串 字面 量 作为 模块 说 明 符 不 同 ，import() 的 模块 说 明 符 可 以 是 模板 字面 量 或 任何 能 生成 
模块 说 明 符 字符 串 的 有 效 JavaScript 表达 式 。 


假设 我 们 正在 国际 化 某 个 应 用 ， 需 要 根据 用 户 代理 的 语言 偏好 加 载 相 应 的 语言 包 。 我 们 可 
以 先导 入 localizationService， 然 后 再 通过 import() 及 根据 插入 navigator.Language 的 
模板 字面 量 构造 的 模块 说 明 符 来 实现 本 地 化 数据 的 动态 加 载 ， 如 下 所 示 。 


















































import localizationService from './LocaLizationService.js' 
import(./localizations/${ navigator.language }.json') 
.then(module => localizationService.use(module)) 


注意 ， 通 常 并 不 建议 将 代码 写成 以 上 那样 ， 原 因 如 下 。 


。 对 静态 分 析 不 友好 ， 因 为 静态 分 析 是 在 构建 时 执行 的 ， 所 以 几乎 不 可 能 推断 出 ${ navigator. 
Language } 这 样 插值 的 结果 。 

。 JavaScript 打包 工具 也 很 难 对 其 进行 打包 ， 结 果 很 可 能 是 应 用 加 载 完 成 后 再 异步 加 载 这 
个 模块 。 

。 Rollup 等 工具 很 难 对 其 进行 摇 树 优化 ， 难 以 销 除 并 未 导入 (因而 永远 不 会 用 到 ) 的 模块 
代码 ， 因 此 也 就 难以 缩小 包 并 提升 性 能 。 
不 利于 辅助 检查 模块 导入 语句 中 要 导入 的 文件 是 否 缺 失 的 工具 (如 eslint-plugin-import) 
发 挥 作用 。 


与 import 语句 类 似 ， 规 范 也 没有 说 明 import() 获取 模块 的 方式 ， 因 此 就 要 看 宿主 环境 了 。 


但 提案 说 明了 模块 被 成 功 解决 后 ，Promise 应 该 获取 解析 后 的 命名 空间 对 象 。 同 时 该 提案 
指出 ， 如 果 发 生 错误 导致 模块 加 载 失败 ， 那 么 Promise 应 该 被 拒绝 。 













































































对 于 不 那么 重要 的 模块 ， 我 们 可 以 在 不 阻塞 页 面 加 载 的 情况 下 进行 异步 加 载 ， 同 时 还 可 以 
在 模块 加 载 失败 时 恰当 地 处 理 ， 如 下 所 示 。 








import('./vendor/jquery.js') 
.then($ => { 
// 使 用 jQuery 

}) 

.Catch(() => { 
// 加 载 jQuery 失败 

}) 
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我 们 可 以 用 Promise.all 异步 加 载 多 个 模块 。 以 下 示例 同时 导入 了 3 个 模块 ， 然 后 在 .then 
子 句 中 直接 用 解构 获取 了 对 它们 的 引用 。 


const specifiers = [ 
'./vendor/jquery.js', 
'./vendor/backbone.js', 
'./Lib/util.js' 
] 
Promise 
.all(specifiers.map(specifier => import(specifier))) 
.then(([$, backbone, util]) => { 
ye 使 用 模块 





同样 ， 我 们 可 以 用 同步 循环 或 async/await 来 加 载 模块 ， 如 下 所 示 。 





async function load() { 

const { map } = await import('./vendor/jquery.js') 

const $ = await import('./vendor/jquery.js') 

const response = await fetch('/cats') 

const cats = await response.json() 

$s('<div>') 
.addClass('container cats') 
.html(map(cats, cat => cat.htmlSnippet)) 
.appendTo(document .body) 


Load() 


await import() i 上 动态 导入 模块 看 起 来 像 静态 的 import 语句。 我们 自己 心里 必须 明白 ， 这 
里 其 实 是 一 个 接 一 个 地 异步 加 载 多 个 模块 。 





注意 ， 虽 然 import() 有 点 像 函 数 ， 但 语义 与 常规 函数 不 同 。 这 里 import 并 非 函 数 定义 ， 不 
能 进行 扩展 、 不 能 给 它 添加 属性 ， 也 不 能 对 它 使 用 解构 语法 。 从 这 个 意义 上 说 ，import() 
更 像 是 类 构造 器 中 的 super() 调用 。 


8.3 ”ES 模块 的 实践 考量 


无 论 使 用 什么 模块 系统 ， 我 们 都 可 以 做 到 公开 API 并 同时 隐藏 信息 。 这 种 完美 的 信息 
隐藏 正 是 以 前 的 开发 者 梦 取 以 求 的 特性 。 那 时 候 ， 要 想 实 现 同样 的 功能 ， 必 须 非 常熟 悉 
JavaScript 的 作用 域 规则 ， 否 则 就 得 盲目 地 循环 某 种 模式 ， 如 下 所 示 。 这 个 示例 使 用 局 部 
作用 域 的 catc 函数 创建 了 一 个 randon 模块 ， 该 函数 负责 生成 一 个 区 间 为 [9，n) 的 随机 
数 ， 而 公共 API 中 包含 range 方法 ， 该 方法 可 以 计算 一 个 [min，max] 范围 内 的 随机 数 。 











const random = (function() { 
const calc = n => Math.floor(Math.random() * n) 
const range = (max = 1, min = 0) => calc(max + 1 - min) + min 
return { range } 


})() 





A 
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比较 以 上 代码 与 以 下 名 为 random 的 ESM 模块 中 的 代码 。 你 会 发 现 ， 立 即 调 用 函数 表达 式 
(IFE，immediately invoked function expression) 的 包装 不 见 了 ， 模 块 的 名 字 也 不 见 了 。 这 
里 模块 的 名 字 已 经 变 成 了 文件 名 。 我 们 又 回 到 了 以 前 在 HTML 的 <script> 标签 内 编写 原 
始 JavaScript 代码 的 日 子 。 





const calc = n => Math.fLoor(Math.random() * n) 
const range = (max = 1, min = 0) => calc(max + 1 - min) + min 
export { range } 


虽然 没有 用 IFE 来 包装 代码 的 问题 了 ， 但 如 何 定义 、 测 试 、 说 明和 使 用 模块 仍然 需要 认真 
思考 。 


决定 模块 中 包含 什么 内 容 并 不 容易 。 需 要 考虑 的 因素 非常 多 ， 以 下 列举 了 其 中 一 部 分 。 


。 过 于 复杂 吗 ? 

。 过 大 了 吗 ? 

。 API 有 没有 明确 的 含义 ? 

。 API 有 没有 完善 的 文档 ? 
为 这 个 模块 编写 测试 是 否 简单 ? 
为 这 个 模块 增加 新 特性 难 不 难 
删除 模块 中 的 特性 困难 吗 ? 












































> 























相 较 于 模块 长 度 ， 复 杂 性 是 需要 考量 的 首要 指标 。 一 个 模块 可 能 有 几 千 行 代码 但 很 简单 ， 
比如 将 文件 说 明 符 映 射 为 特定 语言 字符 串 的 字典 ， 模 块 也 可 能 只 有 几 十 行 代码 却 非 常 难以 
理解 ， 比 如 涉及 域名 验证 和 其 他 业务 逻辑 规则 的 数据 模型 。 我 们 可 以 将 代码 拆 分 成 更 小 的 
模块 以 降低 复杂 性 ， 每 个 模块 只 专注 于 解决 问题 的 某 一 方面 。 只 要 不 是 过 于 复杂 ， 大 模块 
也 不 是 什么 大 问题 。 




















明确 定义 的 API 同时 配 有 完善 的 文档 也 是 优秀 模块 化 设计 的 关键 。 模 块 的 API 应 该 聚焦 ， 
遵循 信息 隐藏 原理 。 换 名 话说 ， 只 对 模块 使 用 者 暴露 必要 的 东西 。 通 过 隐藏 模块 的 内 部 实 
现 ， 即 使 模块 代码 缺乏 注释 和 文档 ， 或 者 将 来 再 被 修改 ， 我 们 仍然 可 以 从 整体 上 保持 接口 
简单 ， 避 免 意外 的 调用 出 现 。 通 过 给 公开 的 API 编写 完善 的 文档 ， 即 使 这 些 文档 是 写 在 代 
码 中 的 注释 ， 抑 或 代码 本 身 就 可 以 自 解释 ， 我 们 可 以 降低 模块 使 用 者 的 认 知 门槛 。 














测试 应 该 只 针对 模块 的 公开 接口 来 编写 ,模块 的 内 部 实现 应 该 看 作 无 关 紧 要 的 实现 细 证 。 
测试 要 覆盖 模块 公开 接口 的 不 同方 面 ， 只 要 API 的 输入 和 输出 不 变 ， 对 内 部 实现 的 修改 就 
不 应 该 影响 测试 覆盖 率 。 




















同样 ， 为 模块 增加 或 减少 特性 的 容易 性 也 是 需要 考量 的 一 个 因素 。 


添加 一 个 新 特性 有 多 难 ? 
为 实现 某 个 逻辑 是 不 是 必须 修改 几 个 不 同 的 模块 ? 























JavaScript 模 块 | 217 


这 个 流程 是 不 是 重复 了 很 多 次 ?或 许 我 们 可 以 将 那些 变化 抽象 到 一 个 高 层 模 块 ， 以 隐藏 
复杂 性 ， 也 许 这 样 做 很 大 程度 上 只 是 引入 了 一 个 中 间 层 ， 虽 然 有 一 些 好 处 或 改进 ， 却 导 
致 代码 更 难 理解 了 。 

。 从 另 一 方面 看 ， 这 个 API 有 和 多么 不 容易 改动 ? 

。 删除 模块 的 一 部 分 、 完 全 删除 ， 或 用 其 他 逻辑 代 赫 它 是 不 是 很 容易 ? 
如 果 模 块 之 间 的 依赖 度 很 高 ， 那 代码 年 代 越 和 久远， 改版 次 数 越 多 ， 代 码 量 越 大 ， 修 改 就 
越 困 难 。 


























浏览 器 实现 的 功能 只 是 原生 JavaScript 模块 的 一 点 皮毛 。 在 撰写 本 书 时 ， 有 的 浏览 器 已 经 实现 
了 import 和 export 语句 。 有 的 浏览 器 已 经 实现 了 <script type='module'>， 通 过 指定 module 
脚本 类 型 来 使 用 模块 。 模 块 加 载 器 规范 还 未 最 终 制 定 完 成 ， 其 最 新 进展 参见 https://github. 


com/whatwg/loader#implementation-status。 





在 此 期 间 ，Nodejjs 发 布 的 新 版 本 还 没有 包含 JavaScript 模块 系统 的 实现 。 考 虑 到 JavaScript 
生态 系统 中 的 工具 都 依赖 Node， 到 底 能 实现 多 大 程度 的 兼容 还 说 不 清楚 。 实 现 迟 述 不 能 
推出 的 原因 是 ， 目 前 还 无 法 确定 一 个 文件 是 CommonJS 模块 还 是 ESM 模块 。 根 据 文件 
中 至 少 存在 一 个 import 或 export 语句 来 判断 它 是 否 为 ESM 模块 的 提案 最 终 被 废弃 了 。 
目前 的 做 法 是 准备 为 ESM 模块 专门 引入 一 个 新 文件 扩展 名 。 览 于 运行 Nodejjs 的 平台 及 
使 用 场景 具有 多 样 性 ， 这 里 要 考虑 的 细节 非常 庞杂 。 得 到 一 个 优雅 、 完 美 、 正 确 的 方案 是 
非常 难 的 。 


下 一 章 将 讨论 如 何 有 效 地 使 用 这 些 新 的 语言 特性 和 语法 。 
































JavaScript 是 一 门 不 断 发 展 的 语言 。 多 年 来 ，JavaScript 的 发 展 节奏 有 快 有 慢 ， 随 着 ES5 的 
推出 ， 其 发 展 进 入 了 高 速 阶段 。 到 目前 为 止 ， 本 书 介绍 了 ES6 中 引入 的 几 十 种 语言 特性 和 
语法 变化 ， 以 及 后 来 在 ES2016 和 ES2017 中 发 布 的 一 些 语法 特性 和 语法 变更 。 











将 所 有 这 些 新 特性 与 我 们 现 有 的 ES5 知识 进行 协调 似乎 是 一 项 艰巨 的 任务 : 我 们 应 该 使 用 
哪些 特性 以 及 如 何 使 用 呢 ? 本 章 旨 在 帮助 我 们 在 使 用 ES6 新 特性 时 做 出 更 合理 的 选择 。 











我 们 将 探究 不 同 的 特性 ， 学 习 这 些 特性 的 用 法 ， 并 探讨 何 种 情况 下 使 用 旧 特 性 更 为 适合 。 
我 们 来 一 个 接 一 个 地 看 。 


9.1 变量 声明 


在 开发 软件 时 ， 我 们 的 大 部 分 时 间 都 花 在 了 阅读 代码 上 ， 而 不 是 编写 代码 。ES6 提供 了 
let 和 const 作为 变量 声明 的 新 方式 ， 并 且 这 些 语 句 中 的 部 分 值 可 以 用 于 标记 变量 的 使 用 
方式 。 在 阅读 一 段 代 码 时 ， 你 可 以 从 这 些 标记 中 得 到 线索 ， 以 便 更 好 地 理解 作者 的 意图 。 
此 类 线索 对 于 缩短 理解 代码 的 时 间 至 关 重 要 ， 因 此 我 们 应 尽 可 能 多 地 使 用 它们 。 









































由 于 需要 遵循 临时 死 区 原则 ，let 语句 表明 变量 不 能 在 其 声明 前 使 用 。 这 不 是 惯例 ， 而 是 事 
实 : 如 果 我 们 在 声明 语句 前 尝试 访问 变量 ， 则 程序 将 失败 。 这 些 语句 是 块 级 作用 域 的 ， 而 不 
是 函数 作用 域 的 。let 语句 可 以 帮助 我 们 在 阅读 更 少 代 码 的 情况 下 完全 掌握 一 个 变量 的 用 法 。 























const 语句 也 是 块 级 作用 域 的 ， 同 样 遵循 临时 死 区 原则 。const 绑 定 只 能 在 声明 时 赋值 ， 因 
此 更 容易 掌握 。 
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注意 ， 尽 管 上 述 规则 表示 变量 绑 定 无 法 更 改 ， 但 这 并 不 意味 着 变量 值 本 身 永远 不 可 变 。 绑 
定 对 象 引用 的 const 变量 不 能 更 改 绑 定 ， 但 是 这 个 被 引用 的 对 象 是 可 变 的 。 


除了 与 let 相同 的 功能 ，const 关键 字 还 表示 变量 绑 定 不 能 被 重新 赋值 。 这 是 一 个 更 为 强 
烈 的 信号 。 你 知道 值 是 什么 ， 你 知道 由 于 块 级 作用 域 ， 绑 定 的 变量 不 能 在 包含 它 的 块 外 被 
访问 ， 你 也 知道 由 于 临时 死 区 原则 ， 绑 定 在 声明 之 前 从 未 被 访问 。 





















































你 可 以 知道 所 有 的 一 切 并 且 无 须 搜寻 变量 的 其 他 引用 ， 只 因为 该 变量 是 通过 const 声明 的 。 






































Let 和 const 声明 语句 提供 的 约束 条 件 可 以 使 得 代码 更 易 理解 。 因 此 ， 编 写 代 码 的 过 程 中 
应 该 尽 可 能 多 地 堂 试 添加 这 些 约束 条 件 。 一 段 代码 的 声明 性 约束 越 多 ， 日 后 人 们 阅读 、 解 
析 和 理解 这 段 代码 就 越 容 易 、 越 迅速 。 


显然 ，const 声明 比 var 声明 的 规则 更 多 ， 包 括 块 级 作用 域 、 临 时 死 区 原则 、 声 明 时 赋值 
以 及 禁止 重新 赋值 ， 而 var 声明 只 规定 了 函数 作用 域 。 条 条 框框 太 多 也 许 会 导致 作 草 自 
缚 ， 我 们 最 好 从 复杂 性 来 权衡 这 些 规则 : 规则 增加 还 是 减少 了 复杂 性 ? 在 const 中 ， 块 级 
作用 域 意味 着 作用 域 的 范围 比 函 数 作 用 域 更 窗 ， 临 时 死 区 原则 意味 着 无 须 追 斋 声 明 前 的 代 
码 来 查找 变量 用 法 ， 赋 值 规则 确保 绑 定 将 始终 保留 相同 的 引用 。 

限制 性 语句 越 多 ， 代 码 就 会 越 简单 。 当 我 们 为 语句 的 含义 添加 约束 时 ， 代 码 会 变 得 更 加 可 
预 出 。 这 通常 是 静态 类 型 程序 比 动态 类 型 程序 更 易 阅 读 的 原因 之 一 。 静 态 类 型 会 很 大 程度 
地 限制 程序 编写 者 及 程序 的 解析 ， 从 而 使 得 代码 更 易 理 解 。 
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综 上 所 述 ， 建 议 你 尽 可 能 多 地 使 用 const， 因 为 这 种 声明 人 允许 我 们 尽 可 能 少 地 思 芳 。 


if (condition) { 
// 在 符合 条 件 之 前 不 能 访问 isReady 
const isReady = true 


// isReady 不 能 被 重新 赋值 
} 
// 在 块 级 作用 域 之 外 不 能 访问 isReady 
考虑 到 有 些 变量 后 续 要 被 重新 赋值 ， 我 们 会 选择 使 用 tet 进行 变量 声明 ， 而 非 const。let 


语句 与 const 语句 具有 相同 的 优点 ， 但 let 语句 声明 的 变量 可 以 重复 赋值 。let 语句 可 用 
于 实现 计数 器 、 改 变 布尔 值 或 推迟 初始 化 。 


A 
此 处 ， 我 们 使 用 let， 因 为 一 旦 满足 条 件 ， 变 量 值 就 需要 改变 。 























function prettySize(input) { 
Let value = input 
Let unit = 'MB' 
if (value >= 1024) { 
value /= 1024 
unit = 'GB' 





if (value >= 1024) { 
vaLue /= 1024 
unit = 'TB' 


return ‘S${ value.toFixed(1) } ${ unit }° 
} 


要 想 支 持 拍 字 节 (PB) 级 单位 ， 就 需要 在 return 语句 前 引入 一 个 新 的 if 分支。 


if (vaLue >= 1024) { 
value /= 1024 
unit = 'PB’ 


} 
如 果 想 让 prettysize 更 轻松 地 扩展 新 的 单位 ， 我 们 可 以 考虑 实现 一 个 toLargestUnit 函数 


来 计算 任何 给 定 input 的 unit 和 value 及 其 当前 的 单位 。 然 后 我 们 可 以 在 prettySize 中 使 
用 toLargestUnit 来 返回 格式 化 的 字符 串 。 


以 下 代码 实现 了 这 样 一 个 功能 。 它 依赖 于 支持 的 units 数组 ， 而 不 是 为 每 个 单位 都 创建 
新 的 分 支 。 当 输入 value 不 小 于 1924 且 存 在 更 大 的 单位 时 ， 我 们 将 输入 的 数值 除 以 1024 
并 移 到 下 一 个 单位 。 接 着 我 们 对 更 新 后 的 值 调用 toLargestunit， 它 将 继续 递归 地 减 小 
value， 直 到 它 足 够 小 或 者 我 们 达到 最 大 单位 。 























function toLargestUnit(value, unit = 'MB') { 
const units = ['MB', 'GB', 'TB'] 
const i = units.indexOf(unit) 
const nextUnit = units[i + 1] 
if (value >= 1024 && nextUnit) { 
return toLargestUnit(vaLue / 1024, nextUnit) 


} 


return { value, unit } 


} 
过 去 ， 引 入 对 PB 的 支持 需要 涉及 新 的 if 分 支 和 重复 的 逻辑 ， 现 在 只 需要 在 units 数组 末 
尾 添加 'PB' 字符 串 。 
prettySize 函数 只 需要 专注 于 解决 字符 串 的 显示 问题 ， 因 为 它 可 以 将 计算 的 逻辑 转移 到 
toLargestUnit 函数 中 。 这 种 专注 分 离 也 有 助 于 增加 代码 的 可 读 性 。 








function prettySize(input) { 
const { value, unit } = toLargestUnit(input) 
return ‘S${ value.toFixed(1) } ${ unit }° 

} 


当代 码 中 存在 需要 被 重新 赋值 的 变量 时 ， 我 们 应 该 花 儿 分 钟 思考 一 下 ， 是 否 有 更 好 的 模式 来 
坚决 相同 的 问题 ， 同 时 可 以 避免 重新 赋值 。 这 种 模式 并 非 一 定 有 ， 但 大 部 分 时 候 是 存在 的 。 
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一 旦 想到 不 同 的 解决 方案 ， 你 就 可 以 将 其 











Hd 
Uy 





与 之 前 的 方案 进行 比较 。 确 保 代码 可 读 性 得 到 改 
并 且 实 现 仍然 正确 。 这 里 进行 单元 测试 可 有 BE 是 有 用 的 ， 因 为 它们 可 以 确保 你 不 会 犯 重 














复 的 错误 。 如 果 重 构 的 代码 在 可 读 性 或 可 扩展 性 方 
的 解决 方案 。 


面 看 起 来 更 差 ， 那 么 可 以 考虑 回 





思考 以 下 示例 ， 其 中 用 数组 连接 来 生成 result 数组 。 这 里 我 们 可 以 进行 简 
Let 变 成 const。 


苛 单 的 








function makeCollection(size) { 

let result = [] 
if (size > 0) { 

result = result.concat([1, 2]) 
} 
if (size > 1) { 

result = result.concat([3, 4]) 
} 
if (size > 2) { 

result = result.concat([5, 6]) 
} 


return result 


makeCollection(0) // <- [] 





回 到 以 前 


makeCollection(1) // <- 
makeCollection(2) // <- 
makeCollection(3) // <- 





我 们 可 以 用 接受 多 个 值 











[1, 2] 
[1, 2, 3, 4] 
[15, 2 3).43. 3 | 

















的 Array#push 方法 来 替换 重新 赋值 的 操作 。 如 果 是 一 个 动态 列表 ， 
则 可 以 使 用 扩展 运算 符 来 放 入 更 多 的 .… 


.items ( 即 展开 更 多 项 )。 


function makeCollection(size) { 


const result = [] 

if (size > 0) { 
result.push(1, 2) 

} 

if (size > 1) { 
result.push(3, 4) 


} 

if (size > 2) { 
result.push(5, 6) 

} 


return result 


makeCollection(0) // <- 
makeCollection(1) // <- 
makeCollection(2) // <- 
makeCollection(3) // <- 


[] 

[1, 2] 
[1, 2, 3, 4] 

[1, 2, 3, 4, 5, 6] 


当 确 实 需要 使 用 Array#concat 上 时， 你 可 以 使 用 [... 
最 后 我 们 来 看 看 重 构 。 有 时 一 些 大 型 函数 中 可 能 会 出 现 以 下 这 种 代码 。 


result，1，2] 来 缩短 代码 。 








Let completionText = 'in progress' 
if (completionpercent >= 85) { 


completionText = 'almost done' 
} else if (completionpercent >= 70) { 
completionText = 'reticulating splines' 
} 


在 这 些 情况 下 ， 将 逻辑 提取 为 纯 函数 是 有 意义 的 。 这 样 不 仅 可 以 减少 在 大 型 函数 顶部 出 现 
复杂 的 初始 化 代码 ， 还 可 以 将 计算 文本 的 逻辑 汇总 到 一 个 地 方 。 











以 下 代码 展示 了 如 何 将 计算 文本 的 逻辑 抽取 为 一 个 函数 。 这 样 我 们 便 可 以 将 getCompletionText 
从 原来 的 函数 中 分 离 ， 使 代码 更 为 线性 化 ， 从 而 提升 可 读 性 。 


const completionText = getCompletionText(completionpercent) 


/ds Ss 
function getCompletionText(progress) { 
if (progress >= 85) { 
return 'almost done' 


} 
if (progress >= 70) { 
return 'reticulating splines' 


} 


return "in progress' 


9.2 ”模板 字面 量 


长 久 以 来 ， 由 于 格式 化 字符 串 不 是 原生 方法 ，JavaScript 开发 者 需要 借助 第 三 方 库 来 实现 。 
创建 多 行 字 符 串 也 很 麻烦 ， 比 如 对 单 引 号 或 双 引 号 进行 转 义 ， 这 取决 于 你 使 用 的 是 哪 种 引 
用 样式 。 如 今 ， 模 板 字 面 量 的 产生 简化 了 这 些 操作 。 


模板 字面 量 允许 幅 入 表达 式 ， 这 样 就 可 以 在 字符 串 中 实现 变量 、 函 数 调用 或 任何 JavaScript 
表达 式 的 内 联 操作 ， 而 无 须 依 赖 任何 连接 符 。 


'HeLLo，' + name + '!' // 以 前 的 做 法 
“Hello，S${ name }!” // 使 用 模板 字符 串 的 做 法 


以 下 代码 是 一 段 多 行 字 符 串 ， 其 中 包含 一 个 或 多 个 数组 连接 、 字 符 串 连接 及 换行 符 \n。 
是 ES6 问世 前 书写 HTML 字符 串 ey 




































































'<div>" 
'<p>" 
'<span>Hello</span>' 
'<span>' + Name + '</span>' 
'<span>!</span>" 
'</p>' 
'</div>" 
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通过 使 用 模板 字面 量 ， 我 们 可 以 避免 所 有 不 必要 的 引号 和 连接 ， 并 专注 于 内 容 。 支 持 典 入 
表达 式 很 有 用 ， 这 一 功能 也 使 得 多 行 字符 串 成 为 模板 字面 量 最 常用 的 场景 之 一 。 




















“<div> 
<p> 
<span>Hello</span> 
<span>${ name }</span> 
<span>!</span> 
</p> 
</div> 


当 一 个 字符 串 包含 引用 时 ，' 和 " 要 比 ` 更 为 有 用 。 对 于 大 多 数 的 英语 句 式 ， 单 引号 和 双 
引号 的 使 用 频率 要 比 反 引 号 高 得 多 ， 因 此 反 引 号 可 以 减少 转 义 的 使 用 。 








'Alfred\'s cat suit is "slick".' 
"Alfred's cat suit is \"slick\"." 
‘Alfred's cat suit is "slick".. 


正如 第 2 章 中 所 说 ， 还 有 一 些 其 他 的 特性 ， 比 如 标签 字符 串 ， 它 可 以 使 谋 入 表达 式 更 为 简 
洁 。 虽 然 这 一 功能 很 有 用 ,但 它 还 是 不 如 多 行 字符 串 、 风 入 表达 式 及 减少 转 义 好 用 。 


综合 以 上 特性 可 知 ， 模 板 字面 量 比 单 引 号 或 双 引 号 字符 串 更 适合 作为 默认 字符 串 样式 。 与 此 
同时 ， 仍 然 存在 一 些 问 题 。 接 下 来 我 们 将 讨论 并 解决 每 个 问题 。 你 可 以 自行 决定 如 何 使 用 。 


当 需 要 在 字符 串 内 艇 入 表达 式 时 ， 使 用 模板 字面 量 比 字符 串 连 接 更 合适 。 或 许 大 家 都 认同 
这 个 观点 ， 那 么 我 们 就 从 这 个 观点 开始 讨论 。 


性 能 通常 是 大 家 关心 的 问题 之 一 。 所 有 地 方 都 使 用 模板 字面 量 会 降低 应 用 的 性 能 吗 ? 当 使 用 
Babel 等 编译 器 时 ， 模 板 字面 量 会 转换 为 带 引 号 的 字符 串 ， 表 达 式 会 通过 连接 符 穿插 其 间 。 


思考 使 用 模板 字面 量 的 以 下 示例 。 












































const suitkKind = “cat. 
console.log( ‘Alfred's ${ suitkKind } suit is "slick".:) 
// <- Alfred's cat suit is "slick". 


Babel 等 编译 器 可 以 用 带 引 号 的 字符 串 将 示例 代码 转换 为 如 下 代码 。 





const suitkKind = 'cat' 
console.log('Alfred\'s ' + suitkind + ' suit is "slick".') 
// <- Alfred's cat suit is "slick". 


就 可 读 性 而 言 ， 我 们 知道 代 入 表达 式 比 带 引号 的 字符 串 拼 接 更 好 ， 但 为 了 最 大 程度 地 兼容 


























注 1: 排版 爱好 者 可 能 会 说 排版 中 不 应 该 使 用 直 引 号 ， 而 应 该 使 用 无 须 转 义 的 曲 引 号 ， 即 “” 和 ““。 诚 然 
这 是 正确 的 ， 但 由 于 直 引 号 更 容易 输入 ， 因 此 编写 代码 时 习惯 这 样 使 用 。 此 外 ， 排 版 美化 的 工作 如 今 
已 经 交 给 第 三 方 库 或 Markdown 等 编译 器 了 ， 事 情 变 得 简单 很 多 。 
























































-A 
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浏览 器 ， 





站 


当 模 板 字面 量 中 只 有 suitKkind 变量 ， 没 有 插值 、 换 行 符 或 标签 时 ， 绑 
成 一 个 普通 的 带 引 号 的 字符 串 。 


0 果 不 进行 从 模板 字面 量 到 带 引 号 字符 串 的 转换 ， 那 么 我 们 最 好 设法 优化 编译 器 ， 以 确保 


编译 器 会 将 这 些 巾 入 表达 式 转 换 为 带 引 号 的 字符 串 拼 接 。 

















准确 编译 的 情况 下 将 延迟 降 到 最 低 。 


一 个 经 常 被 指出 的 问题 是 语法 。 在 撰写 本 书 上 时， 我们 不 能 在 JSON、 
We 中 使 用 反 引 号 字符 捉 。 























译 器 会 简单 地 将 其 变 





对 象 键 、import 声 


ER 一 条 语句 表明 ， 序 列 化 的 JSON 对 象 不 能 使 用 反 引 号 表示 字符 串 。 从 第 二 
行 可 以 看 出 ， 我 们 可 以 用 模板 字面 量 声明 一 个 对 象 ， 然 后 将 该 对 象 序列 化 为 JSON。 在 调 

















用 JSON.stringify 时 ， 模 板 字面 量 已 经 转译 成 了 带 引号 的 字符 串 。 














JSON.parse('{ "payload": “message ”】} ') 


// 


<- SyntaxError 


JSON.stringify({ payload: ‘message. }) 


// 
模板 字 


<- '{"payload":"message"}' 








掉 量 在 对 象 的 键 中 并 无 用 武之 地 ， 这 样 写 会 导致 语法 错误 。 




















const alfred = { ‘suit kind`: ‘cat. } 


对 象 属性 名 接受 值 类 型 ， 这 些 值 类 型 会 转换 为 纯 字 符 串 ， 但 模板 字面 














无 法 用 作 属 性 名 。 


或 许 你 会 想到 第 2 章 中 介绍 























const alfred = { [suit kind ]: “cat } 


但 是 这 样 的 写法 过 于 见长 ， 不 推荐 使 用 。 此 时 ， 常 规 的 带 引 号 的 字符 串 才 是 


记 住 ， 





用 场景 、 








1 里 。 





， 因 此 





过 的 ES6 的 可 计算 属性 名 ， 如 下 所 示 。 在 可 计算 属性 名 中 ,我 
们 可 以 使 用 任何 想 要 生成 所 需 属 性 键 的 表达 式 ， 其 中 包括 模板 字面 : 


最 佳 实践 。 


“模板 字面 量 是 最 佳 选择 ”这 一 规则 并 不 永远 正确 ， 当 某 条 规则 并 不 适用 于 你 的 使 











人 做 出 自己 的 判 





断 ， 必 要 时 可 以 打破 


它 。 规 则 是 人 制定 的 ， 同 样 的 规则 也 许 适 合 你 ， 但 并 不 适合 别人 。 这 就 是 现代 代码 检查 器 


中 的 每 条 规则 都 是 可 选 的 原因 ， 我 们 必须 遵从 规则 ， 














但 这 些 规 则 并 非 适 用 于 所 有 项 目 。 


或 许 有 一 天 我 们 会 发 明 一 种 写法 ， 可 计算 属性 名 不 需要 写 方 括 号 就 能 使 用 模板 字面 量 ， 这 
样 进行 内 先 字 符 串 时 也 可 以 少 码 点 字 。 但 短 时 间 内 ， 以 下 这 种 写法 是 有 语法 错误 的 。 


const brand = “Porsche. 
const car = { 


‘wheels’: 4 
‘has fueL : true, 
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‘is ${ brand 六 :you Wish、 


} 























导入 模块 时 使 用 模板 字面 量 同 样 会 导致 语法 错误 。 我 们 希望 可 以 在 代码 中 使 用 以 下 写法 来 





进行 模块 导入 ,但 事实 上 并 做 不 到 。 


import { SayHello } from ~ ./World. 


严格 模式 指令 必须 是 单 引 号 或 双 引 号 字符 串 。 在 撰写 本 书 时 ， 并 没有 计划 允许 模板 字 





盏 量 











用 于 'use strict' 指令 。 虽 然 以 下 代码 段 不 会 导致 语法 错误 ， 但 它 也 不 会 启用 严格 模式 。 


这 是 大 量 使 用 模板 字面 量 时 最 需要 注意 的 一 点 。 





"use strict' // 启用 严格 模式 
"use strict" // 启用 严格 模式 
“use strict”// 严格 模式 未 生效 











将 现 有 代码 中 带 引 号 的 字符 串 都 换 成 模板 字面 量 这 一 做 法 目前 存在 和 争议， 这 样 做 很 容易 产 




















生 错 误 ， 因 此 最 好 在 开发 新 功能 或 修复 bug 时 渐进 式 地 进行 替换 。 











好 在 我 们 有 estint 的 支持 ， 正 如 第 1 章 中 所 讨论 的 那样 。 要 想 将 代码 的 默认 字符 串 样 
式 切换 为 反 引 号 ， 我们 可 以 设置 一 个 类 似 以 下 代码 中 的 .eslintre.json 配置 。 注 意 ， 引 用 





(quotes) 需要 使 用 反 引 号 ， 否 则 eslint 将 报错 。 
{ 


"env": { 
"es6": true 
}, 
"extends": "eslint:recommended", 
"rules": { 
"quotes": ["error", "backtick"] 


} 


基于 此 ， 我 们 可 以 在 package.json 中 添加 一 个 Lint 脚本 ， 如 下 所 示 。 其 中 --fix 修饰 符 可 





以 自动 更 正 代 码 中 的 样式 错误 ， 比 如 ， 引 用 时 使 用 单 引 号 而 非 反 引 号 。 








{ 
"scripts": { 
"lint": "eslint --fix ." 


} 
在 命令 行 中 执行 以 下 命令 就 可 以 让 我 们 的 代码 默认 使 用 反 引 号 了 。 





» Npm run Lint 














总 之 ,使 用 模板 字面 量 时 需要 权衡 一 下 。 你 可 以 尝试 采用 反 引 号 优先 的 方法 并 评估 其 优 











点 。 与 惯例 和 配置 相 比 ， 使 用 方便 更 重要 。 
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9.3 简写 及 对 象 解构 


第 1 章 中 介绍 了 简写 的 概念 。 当 想 要 引入 一 个 属性 ， 同 时 作用 域内 存在 同名 绑 定 时 ， 我 们 
可 以 使 用 简写 来 避免 重复 书写 。 





const UnitPrice = 1.25 
const tomato = { 
name: "Tomato ' ， 
color: "red ' ， 
UnitpPrice 


} 





此 特性 在 函数 和 信息 隐藏 中 特别 有 用 。 以 下 示例 用 对 象 解构 从 一 个 商品 中 获取 几 条 信息 ， 
并 返回 一 个 包含 商品 总 价 的 模型 。 





function getGroceryModel({ name, unitPprice }, units) { 
return { 
name, 
unitPprice, 
units, 
totalPrice: unitPrice * units 
} 
} 
getGroceryModel(tomato, 4) 
/* 
{ 
name: 'Tomato', 
unitPprice: 1.25, 
units: 4， 
totaLPrice: 5 
} 
#/ 


以 上 代码 将 简写 与 对 象 解构 搭配 在 一 起 使 用 ， 这 种 写法 很 好 。 如 果 将 解构 看 作 一 种 从 对 象 中 


抽取 属性 的 方式 ， 那 么 反 过 来 ， 简 写 就 可 以 被 看 作 一 种 向 对 象 添加 属性 的 方式 。 在 以 下 示例 
中 ， 知 道 客户 购买 的 数量 后 ， 我 们 就 可 以 用 getGroceryModel 国 数 来 获取 商品 的 totaLPrice。 











const { totaLPrice } = getGroceryModel(tomato, 4) 


是 
党 
2 


1 开始 接触 时 觉得 这 种 做 法 有 悖 于 直觉 ， 但 在 函数 参数 中 应 用 解构 会 很 方便 并 且 可 预 
期 ， 因 为 我 们 知道 getGroceryModel 的 第 一 个 参数 一 定 包含 name 和 unitPrice 属性 。 




















function getGroceryModel({ name, unitPrice }, units) { 
return { 
name, 
unitPprice, 
units, 
totalPrice: unitPrice * units 
} 
} 
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如 果 解 构 函 数 的 输出 ， 则 可 以 让 读者 立即 明白 输出 的 哪些 内 容 是 作者 所 关心 的 。 在 以 下 代 
码 中 ， 我 们 只 需要 产品 名 和 总 价 ， 因 此 可 以 解构 输出 值 来 获取 这 两 个 值 。 





const { name, totalPrice } = getGroceryModel(tomato, 4) 





与 上 面 代 码 做 法 不 同 ， 以 下 代码 没有 使 用 解构 ， 而 是 直接 将 输出 的 对 象 放 入 model 中 。 很 
奇妙 的 是 ， 这 点 区 别 导致 以 下 代码 传递 的 信息 量变 少 了 ， 我 们 需要 查看 后 面 的 代码 才能 知 
道 model 中 的 哪些 属性 正在 被 使 用 。 




















const model = getGroceryModel(tomato, 4) 








当 使 用 同一 对 象 的 多 个 属性 时 ， 解 构 还 可 以 帮助 避免 重复 引用 宿主 对 象 。 


const summary = `${ model.units }x ${ model.name } 
($${ model.unitprice }) = $${ model.totalPrice }° 
// <- '4x Tomato ($1.25) = $5' 





尽管 解构 可 以 避免 使 用 变量 时 重复 引用 宿主 对 象 ， 但 解构 声明 中 需要 重复 书写 属性 名 ， 这 
也 产生 了 一 定 的 开销 ， 需 要 对 此 进行 权衡 。 








const { name, units, unitPprice, totalPrice } = model 
const summary = “S${ units }x ${ name } ($${ unitprice }) = 
$${ totalprice }° 





如 有 果 需 要 多 次 引用 同一 属性 ， 那 么 我 们 最 好 使 用 对 象 解构 ， 以 避免 重复 引用 宿主 对 象 。 
但 只 用 到 一 个 属性 且 只 使 用 一 次 时 ， 为 简单 起 见 ， 显 然 应 该 避免 使 用 解构 。 











const { name } = model 
const summary = ‘This is a ${ name } summary. 


在 summary 中 直接 引用 modeL.name 更 简洁 。 


const summary = ‘This is a ${ model.name } summary. 





当 需 要 使 用 两 个 属性 (或 者 引用 两 次 同一 属性 ) 时 ， 情 况 就 不 一 样 了 。 


const summary = ‘This is a summary for ${ model.units }x 
${ model.name }. 


这 种 情况 下 使 用 解构 更 好 。 解 构 不 仅 减少 了 summary 声明 语句 中 的 字符 数 ， 还 可 以 很 清晰 
地 表示 出 我 们 需要 使 用 model 中 的 哪些 属性 。 











const { name, units } = model 
const summary = ‘This is a summary for S${ units }x ${ name }° 





如 果 我 们 引用 同一 属性 两 次 ， 那 么 也 应 该 使 用 解构 。 在 以 下 示例 中 ， 相 较 于 不 使 用 解构 ， 
我 们 少 了 一 个 modet 引用 并 多 了 一 个 name 引用 。 虽 然 解构 可 以 明确 地 表明 name 的 预期 用 
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法 ， 这 很 有 用 ， 但 使 用 或 者 不 使 用 解构 在 本 例 中 都 可 以 接受 。 





const { name } = model 
Const summary = ‘This is a ${ name } summary 
const description = `${ name } is a grocery item 





解构 有 助 于 减少 对 宿主 对 象 的 引用 ， 但 同时 会 带 来 声明 时 的 无 谓 重复 ， 我 们 需要 根据 引用 
属性 的 数量 来 决定 是 否 使 用 它 。 总 之 ， 虽 然 解构 这 一 特性 很 棒 ， 但 它 并 不 总 会 改善 代码 的 
可 读 性 ， 特 别 是 无 须 减少 宿主 对 象 引 用 时 ， 我 们 更 应 该 辩证 地 使 用 它 。 


9.4 剩余 参数 和 扩展 运算 符 


正则 表达 式 的 匹配 结果 通常 表示 为 数组 ， 其 中 匹配 结果 在 数组 的 第 一 位 ， 而 每 个 捕获 组 放 
置 在 数组 的 后 续 元 素 中 。 通 常 来 说 ， 我 们 对 某 些 特定 的 捕获 感 兴趣 ， 比 如 “第 一 个 捕获 ”。 













































































在 以 下 代码 中 ， 我 们 使 用 解构 将 匹配 结果 中 的 两 个 捕获 组 分 别 赋 给 integer 和 fractional 
变量 ， 这 样 就 不 需要 依靠 索引 来 引用 相应 的 捕获 组 了 。 





function getNumberpParts(number ) { 
const rnumber = /(\d+)\.(\d+)/ 
const matches = number .match(Crnumber) 
if (matches === null) { 
return null 


const [ , integer, fractional] = number.match(rnumber) 
return { integer, fractional } 

} 

getNumberPparts('1234.56') 

// <- { integer: '1234', fractional: '56' } 




















作为 解构 .match 结果 的 一 部 分 ， 我 们 可 以 用 扩展 运算 符 来 获取 每 个 捕获 组 。 


function getNumberpParts(number ) { 
const rnumber = /(\d+)\.(\d+)/ 
const matches = number .match(rnumber) 
if (matches === null) { 
return null 


} 
const [ ，...captures] = number.match(rnumber) 
return captures 

} 


getNumberparts('1234.56') 
// <- ['1234', '56'] 





需要 拼接 数组 时 ， 通 常 使 用 .concat 来 创建 一 个 新 的 数组 。 现 在 ， 使 用 扩展 运算 符 可 以 清 
晰 好 表明 需要 创建 个 由 输入 数组 组 成 的 新 集合 ， 并 且 汪 加 元 素 的 这 种 声明 式 方式 更 符合 
思维 习惯 ， 从 而 改善 了 代码 的 可 读 性 。 
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administrators.concat(moderators) 
[...administrators, ...moderators] 
[...administrators, ...moderators, bob] 





同样 ，3.3.1 节 中 介绍 的 对 象 扩展 特性 ”支持 将 已 有 对 象 合并 到 新 对 象 。 以 下 代码 创建 了 一 
个 新 对 象 ， 它 将 基础 的 defaults 对 象 、 用 户 提供 的 options 对 象 和 一 些 重要 的 重 载 属性 合 
并 在 一 起 ， 后 面 的 属性 会 覆盖 前 面 的 属性 。 

















Object.assign({}, defaults, options, { important: true }) 





上 述 功 能 可 以 用 声明 式 的 对 象 扩展 运算 符 来 实现 。 我 们 使 用 对 象 字面 量 ， 并 放 入 important 
属性 、 扩 展 后 的 defaults 对 象 及 options 对 象 。 避 人 免 使 用 0bject.assign 方法 可 以 显著 地 
提升 代码 的 可 读 性 ， 我 们 甚至 可 以 将 important 属性 内 联 到 对 象 字面 量 声明 中 。 




















...defaults, 
.. .Options, 
important: true 


} 


能 够 将 对 象 扩展 可 视 化 为 0bbject.assign 有 助 于 我 们 更 深刻 地 理解 该 特征 的 工作 原理 。 以 
下 示例 用 对 象 字面 量 替 换 了 defaults 变量 和 options 变量 。 对 每 个 属性 来 说 ， 对 象 扩展 和 
0bject.assign 的 操作 本 质 上 相同 ， 因 此 我 们 可 以 看 到 speed 值 为 3 的 原因 是 options 字面 
量 进行 了 属性 覆盖 ， 即 使 options 字面 量 试图 覆盖 ,但 important 属性 值 仍然 是 true， 这 
是 由 优先 权 的 关系 决定 的 。 
{ 
...{ // defaults 


speed: 1， 
type: 'sports' 
































}， 

...{ // options 
speed: 3， 
important: false 


}, 


important: true 


} 
在 处 理 不 可 变 结构 时 ， 对 象 扩展 会 很 有 用 ， 我 们 应 该 创建 新 对 象 ， 而 不 是 编辑 现 有 对 象 。 
以 下 代码 中 有 一 个 player 对 象 和 一 个 施展 治疗 法 术 的 函数 调用 ， 该 函数 返回 一 个 新 的 、 更 
健康 的 player 对 象 。 








const player = { 
strength: 4， 
Luck: 2， 

















注 2: 撰写 本 书 时 处 于 ECMAScript 标准 开发 过 程 的 阶段 3。 











-A 
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mana: 80 ， 
heaLth: 10 


} 
castHealingSpell(player) // 消耗 46 点 法 力 ， 获 得 110 点 生命 值 


以 下 代码 展示 了 castHealingSpell 方法 的 实现 过 程 ， 我 们 在 不 改变 原始 player 参数 的 情 
况 下 创建 了 一 个 新 的 player 对 象 。 原 始 player 对 象 中 的 每 个 属性 都 被 复制 了 ， 我 们 可 以 
根据 需要 更 新 各 个 属性 。 








const castHealingSpell = player => ({ 
. .Player, 
mana: player.mana - 40， 
health: player.health + 110 
}) 


正如 第 3 章 中 所 阐述 的 那样 ， 我 们 可 以 使 用 对 象 的 剩余 属性 来 解构 对 象 。 除 了 枚 举 未 知 属 
性 等 用 途 ， 对 象 的 剩余 属性 还 可 以 用 于 创建 对 象 的 浅 副 本 。 


以 下 代码 展示 了 三 种 最 简单 的 在 JavaScript 中 创建 对 象 浅 副 本 的 方法 。 第 一 种 方法 是 使 用 
0bject.assign， 将 source 对 象 的 每 个 属性 赋 给 一 个 空 对 象 ， 然 后 返回 该 对 象 。 第 二 种 方 
法 是 使 用 对 象 扩 展 运 算 符 ， 这 相当 于 使 用 0bject.assign， 但 实现 方式 更 为 优雅 。 最 后 一 
种 方法 依赖 于 解构 剩余 参数 。 























const copy = Object.assign({}, source) 
const copy = { ...source } 
const { ...copy } = source 


有 时 我 们 需要 创建 一 个 对 象 的 副本 ， 同 时 在 该 副本 中 省 略 一 些 属性 。 例 如 ， 我 们 可 能 希望 
创建 person 对 象 的 副本 ， 同 时 忽略 其 中 的 name 属性 ， 只 保留 元 数据 。 
普通 的 JavaScript 实现 这 种 方法 的 方式 是 ， 使 用 剩余 参数 来 解构 name 属性 ， 并 将 其 他 


属性 放置 在 metadata 对 象 中 。 我 们 已 经 有 效 地 将 无 须 关 心 的 name 属性 从 metadata 对 象 中 
“ 移 除 ”了 ， 因 此 metadata 对 象 包含 了 person 对 象 中 除 name 属性 外 的 所 有 其 他 属性 。 




















const { name, ...metadata } = person 


以 下 代码 将 people 数组 映射 为 一 组 person 模型 ， 其 中 去 除了 个 人 身份 信息 (如 姓名 和 身 
份 证 号 ) ， 同 时 将 其 他 所 有 内 容 放 入 person 这 个 剩余 参数 中 。 





people.map(({ name，ssn，...person }) => person) 


9.5 ”函数 偏好 


在 ES6 问世 前 ，JavaScript 已 经 提供 了 许多 函数 声明 方法 。 

















函数 声明 是 最 重要 的 一 种 JavaScript 函数 。 国 数 声明 未 被 强调 意味 着 我 们 可 以 依据 代码 可 
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， 而 无 须 担 心 实际 使 用 顺序 。 
函数 声明 的 排列 顺序 ， 这 种 顺 


读 性 给 函数 声明 排序 
以 下 代码 展示 了 三 


printSum(2, 3) 
function printSum(x, y) { 
return print(sum(x, y)) 
} 
function sum(x, y) { 
return x+y 
} 
function print(message) { 
console.log( ‘printing: ${ message }') 


} 














序 有 助 于 线性 阅读 。 








相反 ， 国 数 表 达 式 必须 先 分 配给 一 个 变量 ， 然 后 才能 执行 它们 。 继 续 前 面 的 示例 ， 这 意味 
着 我 们 必须 在 实际 使 用 函数 前 先 对 其 进行 声明 。 

以 下 代码 使 用 函数 表达 式 。 注 意 ， 如 果 我 们 将 printSunm 函数 调用 放 在 非 示 尾 的 其 他 位 置 ， 
那么 代码 会 因为 变量 尚未 初始 化 而 失败 。 





var printSum = function (x, y) { 
return print(sum(x, y)) 
} 
var sum = function (x, y) { 
return x+y 
} 
// 因为 print 未 定义 ， 所 以 执行 printSum() 会 失败 
var print = function (message) { 
console.log( ‘printing: ${ message }') 





} 
printSum(2, 3) 





因此 ， 将 函数 表达 式 排序 为 后 进 先 出 的 栈 可 能 会 更 好 : 将 最 后 调用 的 函数 放 在 第 一 个 ， 将 
倒数 第 二 调用 的 函数 放 在 第 二 个 ， 依 此 类 推 。 重 新 排列 的 代码 如 下 所 示 。 


var sum = function (x, y) { 
return x+y 
} 
var print = function (message) { 
console.log( ‘printing: ${ message }') 
} 
var printSum = function (x, y) { 
return print(sum(x, y)) 


printSum(2, 3) 





虽然 这 段 代码 有 点 难 

















上 一 段 代 码 中 ， 这 点 并 不 明显 ， 因 为 我 们 没有 遵循 后 进 先 出 的 规则 。 








说 ， 这 足以 让 我 们 更 倾向 于 函数 声明 。 


以 读 懂 ， 但 显然 ， 将 函数 表达 式 赋 给 printsum 变量 前 不 入 


E 调 用 它 。 在 
对 于 绝 大 多 数 代 码 来 





函数 表达 式 可 以 有 一 个 用 于 递归 的 名 称 ， 但 该 名 称 在 外 部 作用 域 中 不 可 访问 。 以 下 代码 中 
的 具名 函数 表达 式 sum 赋 给 了 变量 sumMany。sum 引用 可 用 于 内 部 作用 域 中 的 递归 ， 但 试图 
从 外 部 作用 域 使 用 该 引用 会 出 现 错误 。 

















var sumMany = function sum(accumulator = 0, ...values) { 
if (values.length === 0) { 
return accumulator 


const [value, ...rest] = values 
return sum(accumulator + value, ...rest) 


console.log(sumMany(0, 1, 2, 3, 4)) 

// <- 10 

console.log(sum()) 

// <- ReferenceError: sum is not defined 





2.2 节 中 介绍 的 箭头 函数 与 函数 表达 式 类 似 ， 它 舍弃 了 function 关键 字 ， 使 得 语法 更 为 简 
洁 。 在 箭头 函数 中 ， 当 只 有 一 个 参数 ， 且 该 参数 既 疫 有 被 解构 ， 又 不 是 剩余 参数 时 ， 可 以 
不 使 用 圆 括号 将 其 括 起 来 。 箭 头 函 数 可 以 隐 式 地 返回 任何 有 效 的 JavaScript 表达 式 ， 而 无 
须 声 明 块 语句 。 

















以 下 代码 展示 了 第 头 函数 的 用 法 。 第 一 个 箭头 函数 在 块 语句 中 显 式 地 返回 一 个 表达 式 ， 第 
二 个 则 隐 式 地 返回 表达 式 ， 第 三 个 省 略 了 唯一 参数 周围 的 圆 括 号 ， 第 四 个 使 用 块 语句 ， 但 
并 不 返回 值 。 






































const Sum = (x, y) => { return x + y 】} 
const multiply = (x, y) => X x y 
const double = x => X * 2 

const print = x => { console.log(x) } 


第 头 函 数 可 以 用 微小 的 表达 式 返 回 数组 。 以 下 代码 中 的 第 一 个 示例 隐 式 地 返回 包含 两 个 元 
素 的 数组 ， 第 二 个 示例 舍弃 了 第 一 个 参数 并 将 其 余 的 参数 放 在 剩余 参数 items 中 返回 。 

















const makeArray = (first, second) => [first, second] 
const makeSlice = (discarded, ...items) => items 











隐 式 地 返回 一 个 对 象 字面 量 有 点 环 手 ， 因 为 很 难 将 其 与 同样 使 用 大 括号 包 事 的 块 语句 进行 
区 分 。 我 们 必须 在 对 象 字 面 量 周围 添加 圆 括 号 ， 将 其 转化 为 一 个 对 象 表达 式 。 这 样 处 理 足 
以 消除 皮 义 ， 并 告诉 JavaScript 解析 器 正在 处 理 的 是 对 象 字 面 量 。 




































































思考 以 下 示例 ， 我 们 隐 式 地 返回 了 一 个 对 象 表 达 式 。 如 果 没 有 圆 括 号 ， 解 析 器 会 将 代码 解 
析 为 包含 标签 和 字面 量 表 达 式 'Nico' 的 块 语句 。 














const getPerson = name => ({ 
name: 'Nico' 


}) 
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由 于 语法 限制 ， 我 们 无 法 为 箭头 函数 显 式 地 命名 。 但 如 果 将 箭头 函数 声明 放 在 变量 或 属性 
的 右 侧 ， 则 该 变量 名 或 属性 名 就 成 为 了 箭头 函数 的 名 字 。 


使 用 前 需要 给 箭头 函数 表达 式 赋 值 ， 因 此 会 遇 到 与 常规 函数 表达 式 相同 的 排序 问题 。 此 
外 ， 由 于 无 法 命名 ， 我 们 必须 将 箭头 函数 绑 定 到 一 个 变量 ， 这 样 才能 在 递归 时 引用 它们 。 


默认 情况 下 ， 我 们 应 该 首选 使 用 函数 声明 ， 其 在 排序 、 引 用 和 执行 方面 限制 较 少 ， 因 此 可 
以 获得 更 好 的 代码 可 读 性 和 可 维护 性 。 在 未 来 的 重 构 中 ， 也 就 不 必 担 心 因 排 列 顺序 错误 导 
致 的 依赖 链 断 裂 或 必须 遵循 后 进 先 出 的 限制 。 

再 说 第 头 函 数 ， 它 是 一 种 以 简短 形式 声明 函数 的 简洁 而 强大 的 方式 。 函 数 越 小 ， 就 越 适合 
使 用 箭头 函数 ， 这 有 助 于 避免 耗费 精力 在 形式 上 ， 从 而 只 专注 于 函数 本 身 。 随 着 函数 越 来 
越 天 ， 由 于 前 文 提 到 的 顺序 和 命名 问题 ， 箭 头 函 数 的 写法 就 没 那 么 吸引 人 了 。 





























此 外 ， 在 声明 测试 用 例 、new Promise() 和 setTimeout 的 参数 函数 或 数组 映射 函数 等 异步 函 
数 时 ， 箭 头 函 数 也 极其 有 用 。 


思考 以 下 示例 ， 我 们 使 用 非 阻塞 的 wait Promise 来 实现 5 秒 后 打印 一 句 话 。wait 函数 接受 
一 个 以 毫秒 为 单位 的 delay 参数 ， 并 返回 一 个 Promise,， 该 Promise 使 用 setTimeout 在 指 
定时 间 后 进行 解决 。 











wait(5000).then(function () { 
console.log('waited 5 seconds!') 


}) 


function wait(delay) { 
return new Promise(function (resolve) { 
setTimeout(function () { 
resolve() 
}, delay) 
}) 
} 


当 用 箭头 函数 重 写 时 ， 我 们 应 该 保持 wait 函数 的 声明 方式 ， 这 样 就 不 用 将 它 提升 到 作 
用 域 的 顶部 了 。 之 后 我 们 将 其 他 函数 都 换 成 第 头 函 数 ， 以 去 除 为 标记 函数 功能 所 使 用 的 
function 关键 字 。 








以 下 是 用 箭头 函数 重 写 后 的 代码 。 重 构 删 除了 function 关键 字 ， 使 得 wait 函数 的 delay 
参数 和 setTimeout 的 第 二 个 参数 间 的 关系 更 易 理 解 。 


wait(5000).then( 
() => console.log('waited 5 seconds!') 


) 


function wait(delay) { 
return new Promise(resolve => 
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setTimeout(() => resolve(), delay) 
) 
} 


使 用 箭头 函数 的 另 一 大 优势 在 于 它 的 词法 作用 域 ， 其 内 部 不 会 修改 this 和 arguments 的 指 
向 。 如 果 目 前 的 代码 需要 将 this 赋 给 一 个 临时 变量 (通常 命名 为 seLf、context 或 者 _this) 
才能 在 其 内 部 函数 中 获取 , 那么 我 们 可 以 换 成 箭头 函数 的 写法 。 我 们 来 看 看 以 下 示例 。 








const pistol = { 
caliber: 50, 


trigger() { 
const self = this 


setTimeout(function () { 
console.log( ‘Fired caliber ${ self.caliber } pistoL ) 
}，1000) 


pistol.trigger() 


如 果 试 图 在 前 面 示例 中 直接 使 用 this， 那 么 我 们 会 得 到 undefined。 
以 避免 使 用 临时 变量 self。 我 们 不 仅 删除 了 function 关键 字 ， 还 得 益 于 词法 作用 域 ， 
以 不 用 因为 语法 限制 而 改变 写法 。 














const pistol = { 
caliber: 50, 
trigger() { 
setTimeout(() => { 
console.log( ‘Fired caliber ${ self.caliber } pistoL ) 
}，1000) 
} 
} 
pistol.trigger() 





从 经 验 出 发 ,默认 情况 下 使 用 函数 声明 。 但 如 果 该 函数 不 需要 有 意义 的 名 称 、 不 包含 大 段 
代码 或 涉及 递归 ， 则 可 以 考虑 使 用 箭头 国 数 。 


9.6 类 和 代理 


大 多 数 的 现代 编程 语言 都 有 类 的 概念 。JavaScript 类 是 基于 原型 继承 的 语法 糖 。 类 可 以 使 
原型 更 符合 思维 习惯 ， 并 且 更 易于 工具 进行 静态 分 析 。 


在 使 用 原型 的 方式 书写 时 ， 同 名 函数 就 是 构造 函数 本 身 ， 而 声明 实例 方法 则 需要 套用 固定 
的 代码 模式 ， 如 下 所 示 。 











function Player() { 
this.health = 5 
} 


player .prototype.damage = function () { 
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this.health-- 

} 

player .prototype.attack = function (player) { 
player .damage() 

} 


相 比 之 下 ， 类 将 constructor 规范 化 为 一 个 实例 方法 ， 因 此 创建 每 个 实例 时 都 会 调用 这 个 
构造 函数 。 同 时 ， 方 法 被 内 置 到 class 字面 量 中 ， 并 采用 与 对 象 字 面 量 中 的 方法 一 致 的 
语法 。 
































class Player { 
constructor() { 
this.health = 5 
} 
damage() { 
this.health-- 


} 
attack(player) { 
player .damage() 
} 
} 




















将 所 有 的 实例 方法 全 部 放 在 对 象 字 面 量 内 部 ， 可 以 确保 类 声明 不 会 散落 分 布 在 不 同 的 文件 
中 ， 因 而 开发 者 可 以 在 一 个 位 置 中 描述 完整 的 API。 

















相 较 于 将 static 方法 动态 注入 类 ， 将 其 声明 为 class 字面 量 的 一 部 分 同样 有 助 于 将 API 集 
中 化 。API 集中 化 有 助 于 提高 代码 的 可 读 性 ， 开 发 者 学 习 Player API 时 需要 阅读 的 代码 更 
少 。 同 时 ， 一 旦 我 们 约定 在 class 字面 量 中 声明 实例 和 静态 方法 ， 编 码 人 员 就 不 用 浪费 时 
间 在 别处 寻找 动态 方法 。 同 样 ， 我 们 也 可 以 在 class 字面 量 中 定义 getter 和 setter。 





















































CLass PLayer { 
Constructor() { 
Player .heal(this) 


damage() { 
this.health-- 


attack(player) { 
player .damage() 
} 
get alive() { 
return this.health > 0 


static heal(player) { 
player.health = 5 
} 
} 








类 还 提供 了 extends 这 个 基于 原型 继承 的 简单 语法 糖 。 使 用 extends 比 直接 使 用 基于 原型 
的 解决 方案 更 方便 ， 因 为 我 们 无 须 依 赖 于 第 三 方 库 或 采用 其 他 动态 方法 来 实现 类 的 继承 。 
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CLass GameMaster extends Player { 
constructor(...rest) { 
super(...rest) 
this.health = Infinity 


} 
kill(player) { 
while (player.alive) { 
player .damage() 
} 
= 
} 


类 可 以 不 依赖 <iframe> 或 浅 副 本 就 使 用 同样 的 语法 对 内 置 的 原生 对 和 象 (如 Array 和 Date) 
进行 扩展 。 以 下 代码 中 的 List 类 对 Array 进行 扩展 ， 从 而 消除 构建 Array 时 单 参数 重 载 的 
影响 , 同时 将 自 定义 的 方法 放置 到 Array 的 原型 链 上 。 








class List extends Array { 
constructor(...items) { 
super() 
this.push(...items) 
} 
get first() { 
return this[0] 


get last() { 
return this[this.length - 1] 

} 
} 
const number = new List(2) 
console.log(number .first) 
// <- 2 
const items = new List('a', 'few', 'examples') 
console.log(items. last) 
// <- 'examples' 


与 原型 链 相 比 ，JavaScript 类 没 那 么 见长 ， 因 此 类 这 个 语法 糖 比 原型 继承 更 受 欢迎 。 使 用 
JavaScript 类 是 否 有 好 处 却 是 见仁见智 的 。 尽 管 类 由 于 其 先进 的 语法 受到 了 更 多 关注 ,但 
仅 赁 语法 糖 不 足以 让 它 得 到 广泛 的 应 用 。 

















静态 类 型 的 语言 通常 提供 并 强制 使 用 类 *。 相 比 之 下 ， 由 于 JavaScript 具有 高 度 动态 性 ， 类 
并 不 是 强制 性 的 。 几 乎 所 有 需要 使 用 类 的 场景 都 可 以 用 普通 对 象 来 解决 。 














普通 对 象 比 类 更 简单 ， 其 初始 化 的 唯一 方式 是 声明 ， 无 须 使 用 特殊 的 构造 函数 方法 。 它 们 
很 容易 通过 JSON 进行 序列 化 ， 并 且 更 具 互 操作 性 。 继 承 很 少 使 用 正确 的 抽象 ， 但 需要 时 
我 们 可 以 切换 到 类 ， 或 使 用 普通 对 象 和 0bject.create。 


代理 使 得 许多 以 前 不 可 用 的 用 例 成 为 可 能 ， 但 需要 慎 用 。 涉 及 Proxy 对 象 的 解决 方案 也 可 
以 使 用 普通 对 象 和 函数 来 实现 ， 而 无 须 诉 诸 神 奇 的 Proxy 对 象 。 





注 3: 大 多 数 的 函数 式 编程 语言 都 应 该 是 例外 。 
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确实 可 能 存在 必须 使 用 Proxy 的 情况 ， 特 别 是 涉及 开发 环境 中 的 开发 者 工具 时 ， 其 中 开发 
者 工具 的 代码 库 中 隐藏 了 高 度 的 代码 内 省 及 复杂 性 。 在 应 用 级 代码 中 使 用 Proxy 可 以 很 轻 
公 地 避免 这 类 问题 ， 从 而 减少 费解 的 代码 。 


代码 的 目的 越 明确 ， 其 可 读 性 就 越 好 。 声 明 式 代 码 是 可 读 的 ， 明 确 要 做 的 事情 使 得 代码 更 
为 清晰 。 相 比 之 下 ， 在 对 象 之 上 使 用 间接 层 〈 如 Proxy) 会 产生 非常 复杂 且 难 以 推断 的 访 
问 规 则 。 这 并 不 是 说 涉及 Proxy 的 解决 方案 就 难以 理解 ， 而 是 需要 阅读 和 仔细 考虑 更 多 代 
码 才 能 充分 理解 代理 层 行为 方式 的 细微 差别 。 


如 果 想 要 使 用 代理 ， 那 么 对 象 可 能 不 是 我 们 解决 问题 所 适用 的 工具 。 不 要 直接 进入 Proxy 
间接 层 ， 而 是 要 考虑 一 个 简单 的 函数 是 否 提 供 了 足够 的 间接 性 ， 并 且 不 会 导致 对 象 的 行为 
方式 与 JavaScript 中 普通 对 象 的 行为 方式 不 一 致 。 

因此 ， 尽 量 选 用 乏味 的 、 静 态 的 、 声 明 式 的 代码 ， 而 不 是 聪明 的 、 优 雅 的 抽象 。 乏 味 的 代 
码 可 能 比 抽象 有 更 多 的 重复 ， 但 它 也 会 更 简单 、 更 容易 理解 ， 并 且 短 期 内 肯定 会 更 安全 。 
抽象 是 需要 代价 的 。 一 旦 抽象 到 位 ， 往 往 很 难 回头 并 消除 它 。 如 果 抽 象 创建 得 太 早 ， 它 可 
能 不 会 涵盖 所 有 的 常见 用 例 ， 我 们 也 可 能 最 终 不 得 不 分 别处 理 那 些 特殊 情况 。 

选择 乏味 的 代码 时 会 逐渐 自然 地 总 结 出 某 种 模式 。 一 旦 出 现 这 种 模式 ， 我 们 就 可 以 决定 是 
否 需要 进行 抽象 并 适量 重 构 我 们 的 代码 。 一 旦 有 两 三 个 功能 相当 的 代码 段 ， 我 们 就 已 经 抽 
象 出 了 抽象 概念 ， 经 过 时 间 考 验 的 抽象 可 能 会 涵盖 更 多 的 用 例 。 


9.7 异步 代码 流 
第 4 章 探 讨 了 管理 异步 操作 复杂 性 的 不 同方 式 ， 以 及 如 何 使 用 它们 。 这 些 方式 包含 回调 、 


事件 、Promise、 生 成 器 、 异 步 函 数 和 异步 迭代 器 、 外 部 库 和 列表 等 。 你 现在 应 该 已 经 熟悉 
了 这 些 结构 的 工作 方式 ， 那 么 应 该 何 时 使 用 它们 呢 ? 
























































































































































回调 是 最 原始 的 解决 方案 。 理 解 回调 只 需要 一 些 基 础 的 JavaScript 知识 ， 因 此 基于 回调 的 
代码 易于 阅读 。 一 系列 深度 租 套 的 异步 操作 可 能 会 导致 回调 地 狱 ， 因 此 ， 在 操作 流 涉 及 长 
依赖 链 的 情况 下 ， 我 们 应 该 小 心 处 理 回 调 。 

谈 到 回调 ， 当 我 们 有 三 个 及 以 上 相关 任务 需要 异步 执行 时 ， 可 以 使 用 async' 这样 的 库 来 降 
低 代 码 复 杂 性 。 这 些 库 的 另 一 个 优点 是 对 回调 的 微妙 处 理 方式 ， 这 些 库 在 处 理 复杂 代码 时 
很 有 用 ， 比 如 那些 综合 了 通过 库 抽象 的 复杂 流 和 通过 回调 表达 的 简单 代码 流 的 代码 。 


事件 是 一 种 以 异步 等 形式 向 代码 流 中 引入 可 扩展 性 的 简单 方式 。 但 是 事件 并 不 适合 管理 异 
步 任务 的 复杂 性 。 






















































































注 4: 你 可 以 在 GitHub 上 查找 到 的 一 个 流行 的 流 控 制 库 。 
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以 下 示例 表明 ， 如 果 想 要 用 事件 处 理 异 步 任务 ， 那 么 代码 会 变 得 很 复杂 。 虽 然 一 半 的 代码 
行 用 于 定义 代码 流 ， 但 代码 流 还 是 很 难 理解 。 或 许 这 意味 着 我 们 选 错 工具 了 。 














const tracker = emitter() 

tracker.on('started', multiply) 

tracker .on('multiplied', print) 

start(256, 512, 1024) 

function start(...input) { 
const sum = input.reduce((a, b) => a + b, 0) 
tracker .emit('started', { sum, input }) 

} 

function multiply({ sum, input }) { 
const message = ‘The sum of ${ input.join('.') } is ${ sum }. 
tracker .emit('multiplied', message) 


} 
function print(message) { 
console.log(message) 


} 


在 TC39 决定 将 它们 引入 核心 JavaScript 语言 前 ，Promise 就 已 存在 于 用 户 库 很 入 了 。 它 们 
的 作用 与 回调 库 类 似 ， 即 提供 了 另 一 种 编写 异步 代码 流 的 方式 。 


Promise 比 回调 的 使 用 成 本 更 高 一 些 ， 因 为 Promise 链 中 包含 更 多 的 Promise， 所 以 它们 很 
难 与 纯 回 调 交 错 使 用 。 同 时 ， 你 也 不 希望 将 Promise 与 基于 回调 的 代码 搅 在 一 起 ， 这 会 使 
应 用 更 复杂 。 对 于 任何 给 定 的 代码 部 分 ， 选 择 一 种 形式 并 坚持 很 重要 。 只 采取 一 种 形式 可 
以 让 代码 更 关注 于 处 理 的 任务 ， 而 非 实 现 机 制 。 


并 非 使 用 Promise 就 一 定 不 好 ， 只 是 你 需要 了 解 一 下 成 本 。 越 来 越 多 的 网 络 平台 将 Promise 
作为 基础 构建 块 ， 它 只 会 变 得 越 来 越 好 。Promise 是 生成 器 、 异 步 国 数 、 异 步 迭 代 器 和 蜡 
步 生 成 器 的 基础 。 使 用 Promise 越 多 ， 应 用 就 越 具有 协同 性 ， 虽 然 可 以 认为 回调 本 质 上 已 
经 具有 协同 性 ， 但 它们 当然 不 能 与 异步 函数 和 所 有 基于 Promise 的 解决 方案 相 比 ， 并 且 这 
些 方 案 现在 是 原生 的 JavaScript 语言 。 


一 旦 选择 Promise， 可 供 使 用 的 工具 方法 与 第 三 方 库 所 提供 的 基于 回调 的 解决 方案 在 数量 
上 就 完全 可 以 相提并论 了 。 不 同 之 处 是 ， 大 多 数 情况 下 ，Promise 不 需要 依赖 任何 库 ， 因 
为 它们 现在 是 原生 的 JavaScript 语言 。 















































我 们 可 以 使 用 和 迭代 器 来 简单 描述 可 能 有 限 的 序列 。 此 外 ， 它 们 的 异步 对 象 可 以 用 于 描述 需 
要 外 部 处 理 (如 GET 请 求 ) 的 序列 ， 以 产生 元 素 。 这 些 序列 可 以 用 for await. .of 循环 来 
实现 ， 从 而 避免 了 异步 性 质 的 复杂 性 。 


迭代 器 是 描述 对 象 如何 迭 代 生 成 序列 的 有 效 方式 。 当 没有 需要 描述 的 对 象 时 ， 生 成 器 提供 
了 描述 独立 序列 的 方式 。 实 现 一 个 迭代 器 是 描述 一 个 Movie 对 象 应 该 如 何 选 代 的 理想 方式 ， 
可 能 会 使 用 Symbol.asyncIterator 并 获取 电影 中 的 每 个 演员 及 其 所 扮演 的 角色 的 信息 。 但 
是 如 果 没 有 Movie 对 象 的 上 下 文 ， 这 样 的 迭代 器 作为 生成 器 会 更 有 意义 。 
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生成 器 很 有 用 的 另 一 种 情况 是 无 限 序列 。 思 考 以 下 和 迭代 器 ， 其 中 产生 了 无 数 的 整数 。 


const integers = value => ({ 
value, 
[Symbol.iterator]() { 
return { 
next: () => ({ 
value: this.VvaLue++ 


} 
} 
}) 
你 可 能 还 记得 生成 器 本 质 上 是 可 迭代 的 ， 这 意味 着 它们 遵循 夫 代 器 协议 ， 因 此 我 们 无 须 提 
供 友 代 器 。 现 在 我 们 将 可 迭代 integers 对 象 与 以 下 代码 中 的 等 价 生成 器 函数 进行 比较 。 





function* integers(value = 0) { 
while (true) { 
yield vaLue++ 


} 
生成 器 代码 不 仅 更 简短 ， 而 且 更 具 可 读 性 。 由 于 while 循环 的 缘故 ， 它 产生 无 限 序 列 的 
事实 变 得 非常 明显 。 可 迭代 性 要 求 我 们 理解 序列 是 无 限 的 ， 因 为 代码 永远 不 会 返回 带 有 
done: true 标志 的 元 素 。 设 置 初始 vaLue 更 自然 ， 而 且 不 涉及 将 对 象 包装 在 接受 初始 参数 
的 函数 中 。 
Promise 最 初 被 誉 为 回调 地 狱 的 解 药 。 拥 有 深度 垦 套 的 异步 串联 流 时 ， 严 重 依 赖 Promise 的 


程序 可 能 会 陷入 回调 陷阱 。 异 步 函 数 为 这 个 问题 提供 了 一 个 优雅 的 解决 方案 ， 我 们 可 以 使 
用 await 表达 式 来 描述 同样 基于 Promise 的 代码 。 











阅读 以 下 代码 。 
Promise 

.resolve(2) 

.then(x => x * 2) 

.then(x => x * 2) 

.then(x => x * 2) 
当 我 们 使 用 一 个 await 表达 式 时 ， 其 右边 的 表达 式 被 强制 转换 为 一 个 Promise。 当 遇 到 
await 表达 式 时 ， 异 步 函 数 将 暂停 执行 ， 直 到 Promise 被 强制 转换 或 以 其 他 方式 解决 。 当 
Promise 完成 时 ， 异 步 函 数 继续 执行 ， 但 如 果 Promise 被 拒绝 ， 则 拒绝 结果 将 冒 泡 到 由 异步 
函数 调用 返回 的 Promise 中 ， 除 非 该 拒绝 被 catch 处 理 器 捕获 。 

















async function calculate() { 
let x=2 
x = await x* 2 
x = await x* 2 
x = await x* 2 
return x 





async/await 的 优势 是 ， 它 解决 了 Promise 最 大 的 问题 ， 即 无 法 轻易 地 将 同步 代码 混合 到 工 
作 流 中 。 同 时 ， 异 步 函数 允许 使 用 trycatch， 而 这 是 无 法 在 回调 中 使 用 的 。 同 时 ， 通 过 在 
底层 使 用 Promise，async/await 始终 能 够 与 Promise 保持 一 致 ， 总 是 从 每 个 异步 函数 中 返 
回 Promise 并 强制 await 表达 式 转 换 为 Promise。 此 外 ， 在 完成 上 述 操作 的 同时 ， 异 步 函 数 
可 以 用 一 种 类 似 同 步 的 方式 书写 异步 代码 。 


虽然 使 用 await 表达 式 可 以 优化 并 减少 串联 异步 代码 的 复杂 性 ， 但 用 async/ await 代 
禁 Promise 时 很 难 推断 并 发 异步 代码 流 。 在 达到 await 表达 式 之 前 ， 这 可 以 通过 await 
Promise.all(tasks) 以 及 同时 触发 这 些 任务 来 缓解 。 但 鉴于 异步 函数 并 未 针对 此 用 例 进行 
优化 ， 阅 读 此 类 代码 可 能 会 造成 混淆 ， 这 一 点 需要 注意 。 如 果 代 码 是 高 度 并 发 的 ， 则 建议 
考虑 使 用 基于 回调 的 方法 。 









































这 又 让 我 们 辩证 地 思考 问题 ， 新 的 语言 功能 并 不 一 定 适合 所 有 情况 。 遵 守 约 定 很 重要 ， 这 
不 仅 可 以 保持 代码 的 一 致 性 ， 还 不 用 花 大 量 时 间 来 决定 如 何 更 好 地 展现 一 小 段 代 码 ， 但 优 
雅 的 平衡 也 很 重要 。 

当 没有 花 时 间 搞 清楚 最 适合 自己 的 代码 风格 时 ， 我 们 就 是 在 冒险 将 所 有 问题 都 当成 钉子 ， 
因为 我 们 只 有 一 把 锤子 。 为 手头 的 问题 选择 正确 的 工具 比 成 为 约定 和 硬性 规则 的 卫 道 士 更 
重要 。 


ER TS i 

9.8 ”复杂 性 蠕 变 、 抽 象 及 约定 

挑选 正确 的 抽象 很 困难 : 我 们 想 要 通过 引入 隐藏 在 结构 中 的 复杂 性 来 降低 代码 流 的 复 厅 
性 。 为 此 ， 异 步 函 数 借用 了 生成 器 的 基础 ， 生 成 器 对 象 是 可 迭代 的 。 异 步 达 代 器 使 用 了 
Promise。 返 代 器 使 用 了 符号 。Promise 使 用 了 回调 。 

















谈 到 可 维护 代码 时 ， 一 致 性 是 一 个 重要 主题 。 一 个 应 用 可 能 主要 使 用 回调 或 Promise。 就 
任意 一 个 方法 来 说 ， 回 调和 Promise 都 可 以 用 来 降低 代码 流 的 复杂 性 。 当 将 它们 混合 使 用 
时 ， 我 们 需要 确保 不 会 引入 上 下 文 切换 ， 以 避免 开发 人 员 阅 读 不 同 的 代码 片段 时 需要 用 不 
同 的 思维 方式 来 理解 。 

这 就 是 约定 存在 的 原因 。“ 尽 可 能 使 用 Promise” 等 强 有 力 的 约定 大 大 增加 了 代码 的 一 致 性 。 
约定 确保 了 代码 库 的 可 读 性 和 可 维护 性 。 毕 竞 代码 是 用 来 传达 信息 的 通信 设备 。 此 信息 不 仅 
与 执行 代码 的 计算 机 相关 ， 而 且 对 开发 人 员 阅 读 代 码 、 维 护 和 改进 应 用 也 非常 重要 。 

没有 强 有 力 的 约定 ， 沟 通 就 会 崩 涡 ， 开 发 人 员 就 会 很 难 理解 程序 如 何 工作 ， 最 终 导致 生产 
力 下 降 。 


开发 人 员 的 绝 大 多 数 时 间 都 花 在 了 阅读 代码 上 。 因 此 ， 我 们 应 该 投入 更 多 精力 来 思考 如 何 
书写 可 读 性 强 的 代码 。 
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JavaScript 之 父 Brendan Eich 作 序 推荐 


将 Javascript 新 特性 融入 简单 易 懂 的 示例 中 , 助 你 大 幅 提升 代码 表达 能 力 


本 书 从 实际 开发 角度 介绍 ES6 及 后 续 更 新 版 本 特性 ， 以 循序 
渐进 、 通 俗 易 懂 的 方式 讲解 各 种 复杂 的 技术 ， 比 如 异步 控制 
流 、 声 明 对 象 及 函数 的 使 用 等 ， 并 从 实践 角度 提供 了 许多 建 
议 ， 既 能 帮助 广大 前 端 开 发 者 建立 一 个 完整 的 知识 体系 ， 也 
能 助 其 在 工作 中 如 虎 添 材 ， 开 发 出 更 好 的 Web 应 用 。 
加 JavaScript 及 其 标准 制定 流程 的 变化 
四 ES6 的 根本 性 变化 ， 包 括 箭头 函数 、 解 构 、 模 板 字 
面 量 等 
目 声明 对 和 象 原型 对 应 的 类 语法 ， 以 及 新 的 基本 数据 类 
型 : 符号 


目 通过 Promise、 和 迭代 器 、 生 成 器 以 及 异步 函数 控制 
程序 执行 流 


目 如 何 创 建 对 象 映 射 和 唯一 值 集合 
目 如 何 使 用 新 的 代理 与 反射 特性 


目 数字 、 字 符 串 、Unicode、 正 则 表达 式 等 内 置 API 的 
改进 





尼古拉斯 ' 贝 瓦 夸 (Nicolas Bevacqua) ， 知 名 JavaScript 布 道 师 ， 来 自 阿 
根 廷 的 JavaScript 编 程 高 手 ， 目 前 是 Elastic 公 司 用 户 界面 工程 师 。 另 著 
有 《JavaScript Web 应 用 开发 》 一 书 。 
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“尼古拉斯 写 的 东西 特别 实 


用 …… 建 议 你 好 好 读 读 ， 从 
中 发 现 对 自己 有 用 的 东西 ， 
进而 真正 拥抱 JavaScript， 
致力 于 为 所 有 人 开发 更 好 

的 Web 应 用 。” 
一 一 Brendan Eich 
JavaScript 之 父 


“本 书 全 面 介 绍 了 ES6 新 特 


性 的 语法 和 语义 ， 有 助 于 
你 大 幅度 提升 代码 的 表达 
能 力 。 作 者 把 这 些 特性 融 
入 简单 易 懂 的 示例 中 ， 帮 你 
快速 上 手 。” 

Kent C. Dodds 
PayPal 前 端 工程 师 ，TC39 成 员 
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